npm - @neo4j-ndl/react - Versions diffs - 4.25.10 → 5.0.0-alpha.0.b2b2481 - Mend

@neo4j-ndl/react 4.25.10 → 5.0.0-alpha.0.b2b2481

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1181) hide show

package/lib/cjs/status-indicator/stories/status-indicator-variants.story.js CHANGED Viewed

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "unknown" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Unknown" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "success" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Success" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "info" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "warning" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Warning" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "danger" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Danger" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "unknown" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Unknown" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "success" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Success" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "info" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "warning" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Warning" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "danger" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Danger" })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=status-indicator-variants.story.js.map

package/lib/cjs/status-indicator/stories/status-indicator-variants.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status-indicator-variants.story.js","sourceRoot":"","sources":["../../../../src/status-indicator/stories/status-indicator-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAE/D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,~~uBAAuB~~,~~aACpC~~,iCAAK,SAAS,EAAC,~~gDAAgD~~,~~aAC7D~~,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,~~gDAAgD~~,~~aAC7D~~,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,~~gDAAgD~~,~~aAC7D~~,uBAAC,uBAAe,IAAC,OAAO,EAAC,MAAM,GAAG,EAClC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,qBAAkB,IACzC,EACN,iCAAK,SAAS,EAAC,~~gDAAgD~~,~~aAC7D~~,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,~~gDAAgD~~,~~aAC7D~~,uBAAC,uBAAe,IAAC,OAAO,EAAC,QAAQ,GAAG,EACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusIndicator, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-gap-token-16\">\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"unknown\" />\n <Typography variant=\"label\">Unknown</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"success\" />\n <Typography variant=\"label\">Success</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"info\" />\n <Typography variant=\"label\">Info</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"warning\" />\n <Typography variant=\"label\">Warning</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"danger\" />\n <Typography variant=\"label\">Danger</Typography>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"status-indicator-variants.story.js","sourceRoot":"","sources":["../../../../src/status-indicator/stories/status-indicator-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAE/D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mBAAmB,aAChC,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,uBAAe,IAAC,OAAO,EAAC,MAAM,GAAG,EAClC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,qBAAkB,IACzC,EACN,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,uBAAe,IAAC,OAAO,EAAC,QAAQ,GAAG,EACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusIndicator, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"flex gap-token-16\">\n <div className=\"flex flex-col items-center gap-token-8\">\n <StatusIndicator variant=\"unknown\" />\n <Typography variant=\"label\">Unknown</Typography>\n </div>\n <div className=\"flex flex-col items-center gap-token-8\">\n <StatusIndicator variant=\"success\" />\n <Typography variant=\"label\">Success</Typography>\n </div>\n <div className=\"flex flex-col items-center gap-token-8\">\n <StatusIndicator variant=\"info\" />\n <Typography variant=\"label\">Info</Typography>\n </div>\n <div className=\"flex flex-col items-center gap-token-8\">\n <StatusIndicator variant=\"warning\" />\n <Typography variant=\"label\">Warning</Typography>\n </div>\n <div className=\"flex flex-col items-center gap-token-8\">\n <StatusIndicator variant=\"danger\" />\n <Typography variant=\"label\">Danger</Typography>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/status-label/stories/status-label-colors.story.js CHANGED Viewed

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16 n-flex-wrap", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", children: "Discovery" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16 flex-wrap", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", children: "Discovery" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=status-label-colors.story.js.map

package/lib/cjs/status-label/stories/status-label-colors.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status-label-colors.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-colors.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,~~mCAAmC~~,~~aAChD~~,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,qBAAmB,EAC9C,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,uBAAqB,EAClD,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,0BAAwB,IACpD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-gap-token-16 n-flex-wrap\">\n <StatusLabel variant=\"default\">Default</StatusLabel>\n <StatusLabel variant=\"info\">Info</StatusLabel>\n <StatusLabel variant=\"success\">Success</StatusLabel>\n <StatusLabel variant=\"warning\">Warning</StatusLabel>\n <StatusLabel variant=\"danger\">Danger</StatusLabel>\n <StatusLabel variant=\"discovery\">Discovery</StatusLabel>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"status-label-colors.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-colors.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,6BAA6B,aAC1C,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,qBAAmB,EAC9C,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,uBAAqB,EAClD,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,0BAAwB,IACpD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"flex gap-token-16 flex-wrap\">\n <StatusLabel variant=\"default\">Default</StatusLabel>\n <StatusLabel variant=\"info\">Info</StatusLabel>\n <StatusLabel variant=\"success\">Success</StatusLabel>\n <StatusLabel variant=\"warning\">Warning</StatusLabel>\n <StatusLabel variant=\"danger\">Danger</StatusLabel>\n <StatusLabel variant=\"discovery\">Discovery</StatusLabel>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/status-label/stories/status-label-fills.story.js CHANGED Viewed

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16 n-flex-wrap", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "filled", children: "Filled" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "outlined", children: "Outlined" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "semi-filled", children: "Semi-filled" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "clean", hasIcon: true, children: "Clean" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16 flex-wrap", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "filled", children: "Filled" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "outlined", children: "Outlined" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "semi-filled", children: "Semi-filled" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "clean", hasIcon: true, children: "Clean" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=status-label-fills.story.js.map

package/lib/cjs/status-label/stories/status-label-fills.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status-label-fills.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-fills.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,~~mCAAmC~~,~~aAChD~~,uBAAC,mBAAW,IAAC,IAAI,EAAC,QAAQ,uBAAqB,EAC/C,uBAAC,mBAAW,IAAC,IAAI,EAAC,UAAU,yBAAuB,EACnD,uBAAC,mBAAW,IAAC,IAAI,EAAC,aAAa,4BAA0B,EACzD,uBAAC,mBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,4BAEnB,IACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-gap-token-16 n-flex-wrap\">\n <StatusLabel fill=\"filled\">Filled</StatusLabel>\n <StatusLabel fill=\"outlined\">Outlined</StatusLabel>\n <StatusLabel fill=\"semi-filled\">Semi-filled</StatusLabel>\n <StatusLabel fill=\"clean\" hasIcon>\n Clean\n </StatusLabel>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"status-label-fills.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-fills.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,6BAA6B,aAC1C,uBAAC,mBAAW,IAAC,IAAI,EAAC,QAAQ,uBAAqB,EAC/C,uBAAC,mBAAW,IAAC,IAAI,EAAC,UAAU,yBAAuB,EACnD,uBAAC,mBAAW,IAAC,IAAI,EAAC,aAAa,4BAA0B,EACzD,uBAAC,mBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,4BAEnB,IACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"flex gap-token-16 flex-wrap\">\n <StatusLabel fill=\"filled\">Filled</StatusLabel>\n <StatusLabel fill=\"outlined\">Outlined</StatusLabel>\n <StatusLabel fill=\"semi-filled\">Semi-filled</StatusLabel>\n <StatusLabel fill=\"clean\" hasIcon>\n Clean\n </StatusLabel>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/status-label/stories/status-label-with-icons.story.js CHANGED Viewed

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-grid n-grid-cols-6 n-grid-rows-2 n-gap-token-16 n-items-center n-justify-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", hasIcon: true, children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", hasIcon: true, children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", hasIcon: true, children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", hasIcon: true, children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", hasIcon: true, children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", hasIcon: true, children: "Discovery" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", fill: "clean", hasIcon: true, children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", fill: "clean", hasIcon: true, children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", fill: "clean", hasIcon: true, children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", fill: "clean", hasIcon: true, children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", fill: "clean", hasIcon: true, children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", fill: "clean", hasIcon: true, children: "Discovery" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-6 grid-rows-2 gap-token-16 items-center justify-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", hasIcon: true, children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", hasIcon: true, children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", hasIcon: true, children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", hasIcon: true, children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", hasIcon: true, children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", hasIcon: true, children: "Discovery" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", fill: "clean", hasIcon: true, children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", fill: "clean", hasIcon: true, children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", fill: "clean", hasIcon: true, children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", fill: "clean", hasIcon: true, children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", fill: "clean", hasIcon: true, children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", fill: "clean", hasIcon: true, children: "Discovery" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=status-label-with-icons.story.js.map

package/lib/cjs/status-label/stories/status-label-with-icons.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status-label-with-icons.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-with-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,~~yFAAyF~~,~~aACtG~~,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,2BAErB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,6BAEvB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,gCAE1B,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,2BAElC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,6BAEpC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,gCAEvC,IACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-grid n-grid-cols-6 n-grid-rows-2 n-gap-token-16 n-items-center n-justify-items-center\">\n <StatusLabel variant=\"default\" hasIcon>\n Default\n </StatusLabel>\n <StatusLabel variant=\"info\" hasIcon>\n Info\n </StatusLabel>\n <StatusLabel variant=\"success\" hasIcon>\n Success\n </StatusLabel>\n <StatusLabel variant=\"danger\" hasIcon>\n Danger\n </StatusLabel>\n <StatusLabel variant=\"warning\" hasIcon>\n Warning\n </StatusLabel>\n <StatusLabel variant=\"discovery\" hasIcon>\n Discovery\n </StatusLabel>\n <StatusLabel variant=\"default\" fill=\"clean\" hasIcon>\n Default\n </StatusLabel>\n <StatusLabel variant=\"info\" fill=\"clean\" hasIcon>\n Info\n </StatusLabel>\n <StatusLabel variant=\"success\" fill=\"clean\" hasIcon>\n Success\n </StatusLabel>\n <StatusLabel variant=\"danger\" fill=\"clean\" hasIcon>\n Danger\n </StatusLabel>\n <StatusLabel variant=\"warning\" fill=\"clean\" hasIcon>\n Warning\n </StatusLabel>\n <StatusLabel variant=\"discovery\" fill=\"clean\" hasIcon>\n Discovery\n </StatusLabel>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"status-label-with-icons.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-with-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,6EAA6E,aAC1F,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,2BAErB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,6BAEvB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,gCAE1B,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,2BAElC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,6BAEpC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,gCAEvC,IACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"grid grid-cols-6 grid-rows-2 gap-token-16 items-center justify-items-center\">\n <StatusLabel variant=\"default\" hasIcon>\n Default\n </StatusLabel>\n <StatusLabel variant=\"info\" hasIcon>\n Info\n </StatusLabel>\n <StatusLabel variant=\"success\" hasIcon>\n Success\n </StatusLabel>\n <StatusLabel variant=\"danger\" hasIcon>\n Danger\n </StatusLabel>\n <StatusLabel variant=\"warning\" hasIcon>\n Warning\n </StatusLabel>\n <StatusLabel variant=\"discovery\" hasIcon>\n Discovery\n </StatusLabel>\n <StatusLabel variant=\"default\" fill=\"clean\" hasIcon>\n Default\n </StatusLabel>\n <StatusLabel variant=\"info\" fill=\"clean\" hasIcon>\n Info\n </StatusLabel>\n <StatusLabel variant=\"success\" fill=\"clean\" hasIcon>\n Success\n </StatusLabel>\n <StatusLabel variant=\"danger\" fill=\"clean\" hasIcon>\n Danger\n </StatusLabel>\n <StatusLabel variant=\"warning\" fill=\"clean\" hasIcon>\n Warning\n </StatusLabel>\n <StatusLabel variant=\"discovery\" fill=\"clean\" hasIcon>\n Discovery\n </StatusLabel>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/switch/stories/switch-disabled.story.js CHANGED Viewed

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Switch, { label: "Disabled off", isDisabled: true }), (0, jsx_runtime_1.jsx)(react_1.Switch, { label: "Disabled on", isChecked: true, isDisabled: true })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Switch, { label: "Disabled off", isDisabled: true }), (0, jsx_runtime_1.jsx)(react_1.Switch, { label: "Disabled on", isChecked: true, isDisabled: true })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=switch-disabled.story.js.map

package/lib/cjs/switch/stories/switch-disabled.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch-disabled.story.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,~~iCAAiC~~,~~aAC9C~~,uBAAC,cAAM,IAAC,KAAK,EAAC,cAAc,EAAC,UAAU,SAAG,EAC1C,uBAAC,cAAM,IAAC,KAAK,EAAC,aAAa,EAAC,SAAS,QAAC,UAAU,SAAG,IAC/C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Switch } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-flex-col n-gap-token-8\">\n <Switch label=\"Disabled off\" isDisabled />\n <Switch label=\"Disabled on\" isChecked isDisabled />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"switch-disabled.story.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,cAAM,IAAC,KAAK,EAAC,cAAc,EAAC,UAAU,SAAG,EAC1C,uBAAC,cAAM,IAAC,KAAK,EAAC,aAAa,EAAC,SAAS,QAAC,UAAU,SAAG,IAC/C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Switch } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"flex flex-col gap-token-8\">\n <Switch label=\"Disabled off\" isDisabled />\n <Switch label=\"Disabled on\" isChecked isDisabled />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/Tabs.js CHANGED Viewed

@@ -219,7 +219,7 @@ const TabsComponent = (_a) => {
 };
 TabsComponent.displayName = 'Tabs';
 const TabsTab = (_a) => {
-    var { children, id: tabId, isDisabled = false, className, description, tooltipProps, style, as, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "id", "isDisabled", "className", "description", "tooltipProps", "style", "as", "htmlAttributes", "ref"]);
+    var { children, id: tabId, isDisabled = false, className, description, tooltipProps, style, as, htmlAttributes, ref, trailingContent } = _a, restProps = __rest(_a, ["children", "id", "isDisabled", "className", "description", "tooltipProps", "style", "as", "htmlAttributes", "ref", "trailingContent"]);
     const { size, fill, value, onChange, registerTab, unregisterTab, scrollTabIntoView, firstTabId, isValuePresent, } = useTabsContext();
     const internalRef = (0, react_2.useRef)(null);
     // Create a merged ref that handles both ref objects and ref functions
@@ -245,7 +245,7 @@ const TabsTab = (_a) => {
                             onChange(tabId);
                             scrollTabIntoView(tabId);
                         }
-                    }, role: "tab", id: tabId, "aria-disabled": isDisabled, "aria-label": description, "aria-selected": value === tabId, "aria-controls": getTabPanelId(tabId), tabIndex: tabIndex, ref: mergedRef }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-tab-content", children: children }), fill === 'underline' && (0, jsx_runtime_1.jsx)("span", { className: "ndl-tab-underline" })] })) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: description }))] })));
+                    }, role: "tab", id: tabId, "aria-disabled": isDisabled, "aria-label": description, "aria-selected": value === tabId, "aria-controls": getTabPanelId(tabId), tabIndex: tabIndex, ref: mergedRef }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-tab-content", children: children }), trailingContent, fill === 'underline' && (0, jsx_runtime_1.jsx)("span", { className: "ndl-tab-underline" })] })) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: description }))] })));
 };
 TabsTab.displayName = 'Tabs.Tab';
 const TabsTabPanel = (_a) => {

package/lib/cjs/tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n type TooltipObjectProps,\n} from '../_common/types';\nimport { ArrowLeftCircleIconOutline } from '../icons/generated/heroIcons/ArrowLeftCircleIconOutline';\nimport { ArrowRightCircleIconOutline } from '../icons/generated/heroIcons/ArrowRightCircleIconOutline';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { useTabsScrollOverflow } from './use-tabs-scroll-overflow';\n\n// Reusable scroll button component\nconst ScrollButton = ({\n direction,\n isVisible,\n onClick,\n onBackground,\n}: {\n direction: 'left' \| 'right';\n isVisible: boolean;\n onClick: () => void;\n onBackground: React.ComponentProps<typeof TabsComponent>['onBackground'];\n}) => {\n const Icon =\n direction === 'left'\n ? ArrowLeftCircleIconOutline\n : ArrowRightCircleIconOutline;\n const positionClass =\n direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';\n\n return (\n <div\n className={classNames('ndl-scroll-item', positionClass, {\n 'ndl-scroll-item-hidden': !isVisible,\n 'ndl-scroll-item-on-background-default': onBackground === 'default',\n 'ndl-scroll-item-on-background-weak': onBackground === 'weak',\n })}\n >\n <button\n type=\"button\"\n tabIndex={-1}\n className=\"ndl-scroll-icon-wrapper\"\n onClick={onClick}\n aria-hidden=\"true\"\n >\n <Icon className=\"ndl-scroll-icon\" />\n </button>\n </div>\n );\n};\n\ntype TabId = string;\ntype Size = 'small' \| 'large';\ntype Fill = 'underline' \| 'filled';\n\ntype BaseTabsProps<T extends TabId> = {\n /* The currently active tabId /\n value: T;\n /* Callback function triggered when a new tab is selected /\n onChange: (event: T) => void;\n // TODO v5: add leadingVisual & trailingVisual props, to allow for children not to have flex (allowing text ellipsis). Also add a tooltip when ellipsing.\n /* The content dislayed in the tabs /\n children: React.ReactNode \| string;\n /* The fill type of the tabs /\n fill?: Fill;\n /* The size of the tabs /\n size?: Size;\n /* What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. /\n onBackground?: 'weak' \| 'default';\n};\n\ntype TabsContextType<T extends TabId> = Required<\n Pick<BaseTabsProps<T>, 'fill' \| 'size' \| 'onChange' \| 'value'>\n> & {\n registerTab: (tabId: T, ref: React.RefObject<HTMLElement \| null>) => void;\n unregisterTab: (tabId: T) => void;\n scrollTabIntoView: (tabId: T) => void;\n firstTabId: T \| null;\n isValuePresent: boolean;\n};\n\n// oxlint-disable-next-line @typescript-eslint/no-explicit-any\nconst TabsContext = React.createContext<TabsContextType<any> \| null>(null);\n\nconst useTabsContext = () => {\n const context = useContext(TabsContext);\n\n if (context === null) {\n throw new Error('Tab used without context');\n }\n\n return context;\n};\n\nconst getTabPanelId = (tabId: TabId) => `tabpanel-${tabId}`;\n\nconst getGeneralTabClasses = (size: Size, fill: Fill) => {\n return {\n 'ndl-filled-tab': fill === 'filled',\n 'ndl-large': size === 'large',\n 'ndl-small': size === 'small',\n 'ndl-underline-tab': fill === 'underline',\n };\n};\n\nconst TabsComponent = <U extends TabId, T extends React.ElementType = 'div'>({\n children,\n size = 'large',\n fill = 'underline',\n onChange,\n value,\n onBackground = 'weak',\n className,\n style,\n as,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, BaseTabsProps<U>>) => {\n const tabRefs = useRef<Map<U, React.RefObject<HTMLElement \| null>>>(\n new Map(),\n );\n const containerRef = useRef<HTMLElement>(null);\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs([containerRef, ref]);\n const [firstTabId, setFirstTabId] = useState<U \| null>(null);\n const [isValuePresent, setIsValuePresent] = useState(false);\n const valueRef = useRef(value);\n\n // Use the custom hook for scroll overflow behavior\n const { scrollState, scrollToNextItem, checkOverflow } =\n useTabsScrollOverflow(scrollContainerRef);\n\n useEffect(() => {\n valueRef.current = value;\n setIsValuePresent(tabRefs.current.has(value));\n }, [value]);\n\n const registerTab = useCallback(\n (tabId: U, tabRef: React.RefObject<HTMLElement \| null>) => {\n tabRefs.current.set(tabId, tabRef);\n const first = tabRefs.current.keys().next().value ?? null;\n setFirstTabId((prev) => (prev === first ? prev : first));\n\n if (tabId === valueRef.current) {\n setIsValuePresent(true);\n }\n },\n [],\n );\n\n const unregisterTab = useCallback((tabId: U) => {\n tabRefs.current.delete(tabId);\n const first = tabRefs.current.keys().next().value ?? null;\n setFirstTabId((prev) => (prev === first ? prev : first));\n\n if (tabId === valueRef.current) {\n setIsValuePresent(false);\n }\n }, []);\n\n // Check overflow when children change\n useEffect(() => {\n checkOverflow();\n }, [checkOverflow, children]);\n\n const scrollTabIntoView = useCallback((tabId: U) => {\n const tabRef = tabRefs.current.get(tabId);\n const scrollContainer = scrollContainerRef.current;\n\n if (tabRef?.current && scrollContainer) {\n const tabRect = tabRef.current.getBoundingClientRect();\n const containerRect = scrollContainer.getBoundingClientRect();\n const containerCenter = containerRect.left + containerRect.width / 2;\n\n const targetScrollLeft =\n scrollContainer.scrollLeft +\n (tabRect.left - containerCenter + tabRect.width / 2);\n\n scrollContainer.scrollTo({\n behavior: 'smooth',\n left: targetScrollLeft,\n });\n }\n }, []);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n return;\n }\n\n event.preventDefault();\n\n const tabIds = Array.from(tabRefs.current.keys());\n const focusedElement = document.activeElement;\n\n // Find the currently focused tab\n let currentIndex = -1;\n for (let index = 0; index < tabIds.length; index++) {\n const tabRef = tabRefs.current.get(tabIds[index]);\n if (tabRef?.current === focusedElement) {\n currentIndex = index;\n break;\n }\n }\n\n // If no tab is focused, focus the active tab. Or the first tab if the active tab is not present.\n if (currentIndex === -1) {\n const activeTabRef = tabRefs.current.get(value);\n if (activeTabRef?.current) {\n activeTabRef.current.focus();\n } else if (!isValuePresent && firstTabId !== null) {\n const firstTabRef = tabRefs.current.get(firstTabId);\n if (firstTabRef?.current) {\n firstTabRef.current.focus();\n }\n }\n return;\n }\n\n let nextIndex: number;\n\n if (event.key === 'ArrowRight') {\n nextIndex = currentIndex === tabIds.length - 1 ? 0 : currentIndex + 1;\n } else {\n nextIndex = currentIndex === 0 ? tabIds.length - 1 : currentIndex - 1;\n }\n\n const nextTabId = tabIds[nextIndex];\n const nextTabRef = tabRefs.current.get(nextTabId);\n\n if (nextTabRef?.current) {\n nextTabRef.current.focus();\n scrollTabIntoView(nextTabId);\n }\n },\n [value, scrollTabIntoView, firstTabId, isValuePresent],\n );\n\n const classes = classNames(\n 'ndl-tabs',\n getGeneralTabClasses(size, fill),\n className,\n );\n\n const Component: React.ElementType = as ?? 'div';\n\n return (\n <Component\n className={classes}\n style={style}\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n onKeyDown={handleKeyDown}\n ref={mergedRef}\n {...restProps}\n {...htmlAttributes}\n >\n <ScrollButton\n direction=\"left\"\n isVisible={scrollState.isLeftVisible}\n onClick={() => scrollToNextItem('left')}\n onBackground={onBackground}\n />\n <ScrollButton\n direction=\"right\"\n isVisible={scrollState.isRightVisible}\n onClick={() => scrollToNextItem('right')}\n onBackground={onBackground}\n />\n <TabsContext.Provider\n value={{\n fill,\n firstTabId,\n isValuePresent,\n onChange,\n registerTab,\n scrollTabIntoView,\n size,\n unregisterTab,\n value,\n }}\n >\n <div className=\"ndl-tabs-container\" ref={scrollContainerRef}>\n {children}\n </div>\n </TabsContext.Provider>\n </Component>\n );\n};\n\nTabsComponent.displayName = 'Tabs';\n\n/\n @remarks\n * When the `description` prop is set, hovering over the tab will show a tooltip with the text provided in the `description` prop. `tooltipProps` can be used to customize the tooltip appearance. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n /\ntype TabProps<T extends TabId> = {\n /* The id of the tab /\n id: T;\n /* The content of the tab /\n children: React.ReactNode \| string;\n /* A string that will be shown as a tooltip when hovering over the button it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} /\n description?: string;\n /* Props for the tooltip component. /\n tooltipProps?: TooltipObjectProps;\n /* Additional class name /\n className?: string;\n /* Whether the tab is disabled /\n isDisabled?: boolean;\n};\n\nconst TabsTab = <\n U extends TabId = TabId,\n T extends React.ElementType = 'button',\n>({\n children,\n id: tabId,\n isDisabled = false,\n className,\n description,\n tooltipProps,\n style,\n as,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, TabProps<U>>) => {\n const {\n size,\n fill,\n value,\n onChange,\n registerTab,\n unregisterTab,\n scrollTabIntoView,\n firstTabId,\n isValuePresent,\n } = useTabsContext();\n const internalRef = useRef<HTMLElement>(null);\n\n // Create a merged ref that handles both ref objects and ref functions\n const mergedRef = useMergeRefs([\n internalRef as React.RefObject<HTMLElement>,\n ref as React.RefObject<HTMLElement>,\n ]);\n\n // Register/unregister tab for keyboard navigation\n useEffect(() => {\n registerTab(tabId, internalRef);\n\n return () => {\n unregisterTab(tabId);\n };\n }, [tabId, registerTab, unregisterTab]);\n\n const baseClasses = classNames({\n ...getGeneralTabClasses(size, fill),\n 'ndl-disabled': isDisabled,\n 'ndl-selected': value === tabId,\n });\n\n const Component: React.ElementType = as ?? 'button';\n\n const classes = classNames('ndl-tab', baseClasses, className);\n\n // Only the active tab should be in the tab sequence initially\n // Other tabs can be focused via arrow keys but are not in tab sequence\n const tabIndex =\n value === tabId \|\| (!isValuePresent && tabId === firstTabId) ? 0 : -1;\n\n return (\n <Tooltip\n type=\"simple\"\n {...tooltipProps?.root}\n isDisabled={description === undefined}\n >\n <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n <Component\n className={classes}\n style={style}\n onClick={() => {\n if (!isDisabled) {\n onChange(tabId);\n scrollTabIntoView(tabId);\n }\n }}\n role=\"tab\"\n id={tabId}\n aria-disabled={isDisabled}\n aria-label={description}\n aria-selected={value === tabId}\n aria-controls={getTabPanelId(tabId)}\n tabIndex={tabIndex}\n ref={mergedRef}\n {...restProps}\n {...htmlAttributes}\n >\n <span className=\"ndl-tab-content\">{children}</span>\n {fill === 'underline' && <span className=\"ndl-tab-underline\" />}\n </Component>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {description}\n </Tooltip.Content>\n </Tooltip>\n );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabPanelProps = {\n /* The content displayed in the tab panel /\n children: React.ReactNode;\n /* The currently selected tabId. The tab is visible if the value is equal to the tabId /\n value: TabId;\n /* The id of the tab panel /\n tabId: TabId;\n /* Additional class name /\n className?: string;\n};\n\nconst TabsTabPanel = <T extends React.ElementType = 'div'>({\n as,\n children,\n value,\n tabId,\n style,\n className,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, TabPanelProps>) => {\n const Component: React.ElementType = as ?? 'div';\n\n return (\n <>\n {value === tabId ? (\n <Component\n role=\"tabpanel\"\n id={getTabPanelId(tabId)}\n aria-labelledby={tabId}\n style={style}\n className={classNames(className)}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Component>\n ) : null}\n </>\n );\n};\n\nTabsTabPanel.displayName = 'Tabs.TabPanel';\n\ntype TabBadgeProps = {\n /* The content of the badge */\n children: React.ReactNode;\n};\n\nconst TabBadge = ({\n children,\n ref,\n htmlAttributes,\n style,\n className,\n ...restProps\n}: CommonProps<'span', TabBadgeProps>) => {\n const classes = classNames('ndl-tab-badge', className);\n return (\n <Typography\n ref={ref}\n variant=\"subheading-small\"\n className={classes}\n style={style}\n htmlAttributes={htmlAttributes}\n {...restProps}\n >\n {children}\n </Typography>\n );\n};\n\nconst Tabs = Object.assign(TabsComponent, {\n Badge: TabBadge,\n Tab: TabsTab,\n TabPanel: TabsTabPanel,\n});\n\nexport { Tabs };\n"]}
1	+ {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n type TooltipObjectProps,\n} from '../_common/types';\nimport { ArrowLeftCircleIconOutline } from '../icons/generated/heroIcons/ArrowLeftCircleIconOutline';\nimport { ArrowRightCircleIconOutline } from '../icons/generated/heroIcons/ArrowRightCircleIconOutline';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { useTabsScrollOverflow } from './use-tabs-scroll-overflow';\n\n// Reusable scroll button component\nconst ScrollButton = ({\n direction,\n isVisible,\n onClick,\n onBackground,\n}: {\n direction: 'left' \| 'right';\n isVisible: boolean;\n onClick: () => void;\n onBackground: React.ComponentProps<typeof TabsComponent>['onBackground'];\n}) => {\n const Icon =\n direction === 'left'\n ? ArrowLeftCircleIconOutline\n : ArrowRightCircleIconOutline;\n const positionClass =\n direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';\n\n return (\n <div\n className={classNames('ndl-scroll-item', positionClass, {\n 'ndl-scroll-item-hidden': !isVisible,\n 'ndl-scroll-item-on-background-default': onBackground === 'default',\n 'ndl-scroll-item-on-background-weak': onBackground === 'weak',\n })}\n >\n <button\n type=\"button\"\n tabIndex={-1}\n className=\"ndl-scroll-icon-wrapper\"\n onClick={onClick}\n aria-hidden=\"true\"\n >\n <Icon className=\"ndl-scroll-icon\" />\n </button>\n </div>\n );\n};\n\ntype TabId = string;\ntype Size = 'small' \| 'large';\ntype Fill = 'underline' \| 'filled';\n\ntype BaseTabsProps<T extends TabId> = {\n /* The currently active tabId /\n value: T;\n /* Callback function triggered when a new tab is selected /\n onChange: (event: T) => void;\n /* The content dislayed in the tabs /\n children: React.ReactNode \| string;\n /* The fill type of the tabs /\n fill?: Fill;\n /* The size of the tabs /\n size?: Size;\n /* What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. /\n onBackground?: 'weak' \| 'default';\n};\n\ntype TabsContextType<T extends TabId> = Required<\n Pick<BaseTabsProps<T>, 'fill' \| 'size' \| 'onChange' \| 'value'>\n> & {\n registerTab: (tabId: T, ref: React.RefObject<HTMLElement \| null>) => void;\n unregisterTab: (tabId: T) => void;\n scrollTabIntoView: (tabId: T) => void;\n firstTabId: T \| null;\n isValuePresent: boolean;\n};\n\n// oxlint-disable-next-line @typescript-eslint/no-explicit-any\nconst TabsContext = React.createContext<TabsContextType<any> \| null>(null);\n\nconst useTabsContext = () => {\n const context = useContext(TabsContext);\n\n if (context === null) {\n throw new Error('Tab used without context');\n }\n\n return context;\n};\n\nconst getTabPanelId = (tabId: TabId) => `tabpanel-${tabId}`;\n\nconst getGeneralTabClasses = (size: Size, fill: Fill) => {\n return {\n 'ndl-filled-tab': fill === 'filled',\n 'ndl-large': size === 'large',\n 'ndl-small': size === 'small',\n 'ndl-underline-tab': fill === 'underline',\n };\n};\n\nconst TabsComponent = <U extends TabId, T extends React.ElementType = 'div'>({\n children,\n size = 'large',\n fill = 'underline',\n onChange,\n value,\n onBackground = 'weak',\n className,\n style,\n as,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, BaseTabsProps<U>>) => {\n const tabRefs = useRef<Map<U, React.RefObject<HTMLElement \| null>>>(\n new Map(),\n );\n const containerRef = useRef<HTMLElement>(null);\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs([containerRef, ref]);\n const [firstTabId, setFirstTabId] = useState<U \| null>(null);\n const [isValuePresent, setIsValuePresent] = useState(false);\n const valueRef = useRef(value);\n\n // Use the custom hook for scroll overflow behavior\n const { scrollState, scrollToNextItem, checkOverflow } =\n useTabsScrollOverflow(scrollContainerRef);\n\n useEffect(() => {\n valueRef.current = value;\n setIsValuePresent(tabRefs.current.has(value));\n }, [value]);\n\n const registerTab = useCallback(\n (tabId: U, tabRef: React.RefObject<HTMLElement \| null>) => {\n tabRefs.current.set(tabId, tabRef);\n const first = tabRefs.current.keys().next().value ?? null;\n setFirstTabId((prev) => (prev === first ? prev : first));\n\n if (tabId === valueRef.current) {\n setIsValuePresent(true);\n }\n },\n [],\n );\n\n const unregisterTab = useCallback((tabId: U) => {\n tabRefs.current.delete(tabId);\n const first = tabRefs.current.keys().next().value ?? null;\n setFirstTabId((prev) => (prev === first ? prev : first));\n\n if (tabId === valueRef.current) {\n setIsValuePresent(false);\n }\n }, []);\n\n // Check overflow when children change\n useEffect(() => {\n checkOverflow();\n }, [checkOverflow, children]);\n\n const scrollTabIntoView = useCallback((tabId: U) => {\n const tabRef = tabRefs.current.get(tabId);\n const scrollContainer = scrollContainerRef.current;\n\n if (tabRef?.current && scrollContainer) {\n const tabRect = tabRef.current.getBoundingClientRect();\n const containerRect = scrollContainer.getBoundingClientRect();\n const containerCenter = containerRect.left + containerRect.width / 2;\n\n const targetScrollLeft =\n scrollContainer.scrollLeft +\n (tabRect.left - containerCenter + tabRect.width / 2);\n\n scrollContainer.scrollTo({\n behavior: 'smooth',\n left: targetScrollLeft,\n });\n }\n }, []);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n return;\n }\n\n event.preventDefault();\n\n const tabIds = Array.from(tabRefs.current.keys());\n const focusedElement = document.activeElement;\n\n // Find the currently focused tab\n let currentIndex = -1;\n for (let index = 0; index < tabIds.length; index++) {\n const tabRef = tabRefs.current.get(tabIds[index]);\n if (tabRef?.current === focusedElement) {\n currentIndex = index;\n break;\n }\n }\n\n // If no tab is focused, focus the active tab. Or the first tab if the active tab is not present.\n if (currentIndex === -1) {\n const activeTabRef = tabRefs.current.get(value);\n if (activeTabRef?.current) {\n activeTabRef.current.focus();\n } else if (!isValuePresent && firstTabId !== null) {\n const firstTabRef = tabRefs.current.get(firstTabId);\n if (firstTabRef?.current) {\n firstTabRef.current.focus();\n }\n }\n return;\n }\n\n let nextIndex: number;\n\n if (event.key === 'ArrowRight') {\n nextIndex = currentIndex === tabIds.length - 1 ? 0 : currentIndex + 1;\n } else {\n nextIndex = currentIndex === 0 ? tabIds.length - 1 : currentIndex - 1;\n }\n\n const nextTabId = tabIds[nextIndex];\n const nextTabRef = tabRefs.current.get(nextTabId);\n\n if (nextTabRef?.current) {\n nextTabRef.current.focus();\n scrollTabIntoView(nextTabId);\n }\n },\n [value, scrollTabIntoView, firstTabId, isValuePresent],\n );\n\n const classes = classNames(\n 'ndl-tabs',\n getGeneralTabClasses(size, fill),\n className,\n );\n\n const Component: React.ElementType = as ?? 'div';\n\n return (\n <Component\n className={classes}\n style={style}\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n onKeyDown={handleKeyDown}\n ref={mergedRef}\n {...restProps}\n {...htmlAttributes}\n >\n <ScrollButton\n direction=\"left\"\n isVisible={scrollState.isLeftVisible}\n onClick={() => scrollToNextItem('left')}\n onBackground={onBackground}\n />\n <ScrollButton\n direction=\"right\"\n isVisible={scrollState.isRightVisible}\n onClick={() => scrollToNextItem('right')}\n onBackground={onBackground}\n />\n <TabsContext.Provider\n value={{\n fill,\n firstTabId,\n isValuePresent,\n onChange,\n registerTab,\n scrollTabIntoView,\n size,\n unregisterTab,\n value,\n }}\n >\n <div className=\"ndl-tabs-container\" ref={scrollContainerRef}>\n {children}\n </div>\n </TabsContext.Provider>\n </Component>\n );\n};\n\nTabsComponent.displayName = 'Tabs';\n\n/\n @remarks\n * When the `description` prop is set, hovering over the tab will show a tooltip with the text provided in the `description` prop. `tooltipProps` can be used to customize the tooltip appearance. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n /\ntype TabProps<T extends TabId> = {\n /* The id of the tab /\n id: T;\n /* The content of the tab /\n children: React.ReactNode \| string;\n /* A string that will be shown as a tooltip when hovering over the button it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} /\n description?: string;\n /* Props for the tooltip component. /\n tooltipProps?: TooltipObjectProps;\n /* Trailing content that will be rendered after the tab content. Badges belong here. /\n trailingContent?: React.ReactNode;\n /* Additional class name /\n className?: string;\n /* Whether the tab is disabled /\n isDisabled?: boolean;\n};\n\nconst TabsTab = <\n U extends TabId = TabId,\n T extends React.ElementType = 'button',\n>({\n children,\n id: tabId,\n isDisabled = false,\n className,\n description,\n tooltipProps,\n style,\n as,\n htmlAttributes,\n ref,\n trailingContent,\n ...restProps\n}: PolymorphicCommonProps<T, TabProps<U>>) => {\n const {\n size,\n fill,\n value,\n onChange,\n registerTab,\n unregisterTab,\n scrollTabIntoView,\n firstTabId,\n isValuePresent,\n } = useTabsContext();\n const internalRef = useRef<HTMLElement>(null);\n\n // Create a merged ref that handles both ref objects and ref functions\n const mergedRef = useMergeRefs([\n internalRef as React.RefObject<HTMLElement>,\n ref as React.RefObject<HTMLElement>,\n ]);\n\n // Register/unregister tab for keyboard navigation\n useEffect(() => {\n registerTab(tabId, internalRef);\n\n return () => {\n unregisterTab(tabId);\n };\n }, [tabId, registerTab, unregisterTab]);\n\n const baseClasses = classNames({\n ...getGeneralTabClasses(size, fill),\n 'ndl-disabled': isDisabled,\n 'ndl-selected': value === tabId,\n });\n\n const Component: React.ElementType = as ?? 'button';\n\n const classes = classNames('ndl-tab', baseClasses, className);\n\n // Only the active tab should be in the tab sequence initially\n // Other tabs can be focused via arrow keys but are not in tab sequence\n const tabIndex =\n value === tabId \|\| (!isValuePresent && tabId === firstTabId) ? 0 : -1;\n\n return (\n <Tooltip\n type=\"simple\"\n {...tooltipProps?.root}\n isDisabled={description === undefined}\n >\n <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n <Component\n className={classes}\n style={style}\n onClick={() => {\n if (!isDisabled) {\n onChange(tabId);\n scrollTabIntoView(tabId);\n }\n }}\n role=\"tab\"\n id={tabId}\n aria-disabled={isDisabled}\n aria-label={description}\n aria-selected={value === tabId}\n aria-controls={getTabPanelId(tabId)}\n tabIndex={tabIndex}\n ref={mergedRef}\n {...restProps}\n {...htmlAttributes}\n >\n <span className=\"ndl-tab-content\">{children}</span>\n {trailingContent}\n {fill === 'underline' && <span className=\"ndl-tab-underline\" />}\n </Component>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {description}\n </Tooltip.Content>\n </Tooltip>\n );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabPanelProps = {\n /* The content displayed in the tab panel /\n children: React.ReactNode;\n /* The currently selected tabId. The tab is visible if the value is equal to the tabId /\n value: TabId;\n /* The id of the tab panel /\n tabId: TabId;\n /* Additional class name /\n className?: string;\n};\n\nconst TabsTabPanel = <T extends React.ElementType = 'div'>({\n as,\n children,\n value,\n tabId,\n style,\n className,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, TabPanelProps>) => {\n const Component: React.ElementType = as ?? 'div';\n\n return (\n <>\n {value === tabId ? (\n <Component\n role=\"tabpanel\"\n id={getTabPanelId(tabId)}\n aria-labelledby={tabId}\n style={style}\n className={classNames(className)}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Component>\n ) : null}\n </>\n );\n};\n\nTabsTabPanel.displayName = 'Tabs.TabPanel';\n\ntype TabBadgeProps = {\n /* The content of the badge */\n children: React.ReactNode;\n};\n\nconst TabBadge = ({\n children,\n ref,\n htmlAttributes,\n style,\n className,\n ...restProps\n}: CommonProps<'span', TabBadgeProps>) => {\n const classes = classNames('ndl-tab-badge', className);\n return (\n <Typography\n ref={ref}\n variant=\"subheading-small\"\n className={classes}\n style={style}\n htmlAttributes={htmlAttributes}\n {...restProps}\n >\n {children}\n </Typography>\n );\n};\n\nconst Tabs = Object.assign(TabsComponent, {\n Badge: TabBadge,\n Tab: TabsTab,\n TabPanel: TabsTabPanel,\n});\n\nexport { Tabs };\n"]}

package/lib/cjs/tabs/stories/tabs-badge.story.js CHANGED Viewed

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsxs)(react_1.Tabs.Tab, { id: "1", children: ["Tab 2 ", (0, jsx_runtime_1.jsx)(react_1.Tabs.Badge, { children: "5" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", trailingContent: (0, jsx_runtime_1.jsx)(react_1.Tabs.Badge, { children: "5" }), children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-badge.story.js.map

package/lib/cjs/tabs/stories/tabs-badge.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-badge.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-badge.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,~~cAAc~~,~~aAC9D~~,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,~~wBAAC~~,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,~~uBACR~~,uBAAC,YAAI,CAAC,KAAK,oBAAe,~~IACvB~~,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [value, setValue] = useState<TabValues>('0');\n\n return (\n <div>\n <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\"~~>\n Tab~~ 2 <Tabs.Badge>5</Tabs.Badge>\n </Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={value} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"tabs-badge.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-badge.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,YAAY,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,eAAe,EAAE,uBAAC,YAAI,CAAC,KAAK,oBAAe,sBAEjD,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [value, setValue] = useState<TabValues>('0');\n\n return (\n <div>\n <Tabs value={value} onChange={setValue} className=\"mb-token-8\">\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\" trailingContent={<Tabs.Badge>5</Tabs.Badge>}>\n Tab 2\n </Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={value} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-default.story.js CHANGED Viewed

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-default.story.js.map

package/lib/cjs/tabs/stories/tabs-default.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-default.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,~~cAAc~~,~~aAC9D~~,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [value, setValue] = useState<TabValues>('0');\n\n return (\n <div>\n <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={value} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"tabs-default.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,YAAY,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [value, setValue] = useState<TabValues>('0');\n\n return (\n <div>\n <Tabs value={value} onChange={setValue} className=\"mb-token-8\">\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={value} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-disabled.story.js CHANGED Viewed

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", isDisabled: true, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", isDisabled: true, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-disabled.story.js.map

package/lib/cjs/tabs/stories/tabs-disabled.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-disabled.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,~~cAAc~~,~~aAC9D~~,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,EAAE,IAAI,sBAEtB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [value, setValue] = useState<TabValues>('0');\n\n return (\n <div>\n <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\" isDisabled={true}>\n Tab 3\n </Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={value} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"tabs-disabled.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,YAAY,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,EAAE,IAAI,sBAEtB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [value, setValue] = useState<TabValues>('0');\n\n return (\n <div>\n <Tabs value={value} onChange={setValue} className=\"mb-token-8\">\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\" isDisabled={true}>\n Tab 3\n </Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={value} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-fill-variants.story.js CHANGED Viewed

@@ -27,7 +27,7 @@ const react_2 = require("react");
 const Component = () => {
     const [underlineValue, setUnderlineValue] = (0, react_2.useState)('0');
     const [filledValue, setFilledValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Underline (Default)" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: underlineValue, onChange: setUnderlineValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Filled" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: filledValue, onChange: setFilledValue, fill: "filled", className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Underline (Default)" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: underlineValue, onChange: setUnderlineValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Filled" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: filledValue, onChange: setFilledValue, fill: "filled", className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-fill-variants.story.js.map

package/lib/cjs/tabs/stories/tabs-fill-variants.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-fill-variants.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-fill-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,iCAAK,SAAS,EAAC,~~sBAAsB~~,~~aACnC~~,iCAAK,SAAS,EAAC,~~kCAAkC~~,~~aAC/C~~,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,oCAAiC,EAC5D,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAC,~~cAAc~~,~~aAExB~~,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,~~iCAAiC~~,~~aAC9C~~,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,EAC/C,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,~~cAAc~~,~~aAExB~~,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [underlineValue, setUnderlineValue] = useState<TabValues>('0');\n const [filledValue, setFilledValue] = useState<TabValues>('0');\n\n return (\n <div className=\"n-flex n-gap-token-8\">\n <div className=\"n-flex n-flex-col n-gap-token-32\">\n <Typography variant=\"label\">Underline (Default)</Typography>\n <div>\n <Tabs\n value={underlineValue}\n onChange={setUnderlineValue}\n className=\"n-mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={underlineValue} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={underlineValue} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={underlineValue} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n\n <div className=\"n-flex n-flex-col n-gap-token-8\">\n <Typography variant=\"label\">Filled</Typography>\n <div>\n <Tabs\n value={filledValue}\n onChange={setFilledValue}\n fill=\"filled\"\n className=\"n-mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={filledValue} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={filledValue} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={filledValue} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"tabs-fill-variants.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-fill-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,iCAAK,SAAS,EAAC,kBAAkB,aAC/B,iCAAK,SAAS,EAAC,4BAA4B,aACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,oCAAiC,EAC5D,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAC,YAAY,aAEtB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,EAC/C,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,YAAY,aAEtB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [underlineValue, setUnderlineValue] = useState<TabValues>('0');\n const [filledValue, setFilledValue] = useState<TabValues>('0');\n\n return (\n <div className=\"flex gap-token-8\">\n <div className=\"flex flex-col gap-token-32\">\n <Typography variant=\"label\">Underline (Default)</Typography>\n <div>\n <Tabs\n value={underlineValue}\n onChange={setUnderlineValue}\n className=\"mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={underlineValue} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={underlineValue} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={underlineValue} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n\n <div className=\"flex flex-col gap-token-8\">\n <Typography variant=\"label\">Filled</Typography>\n <div>\n <Tabs\n value={filledValue}\n onChange={setFilledValue}\n fill=\"filled\"\n className=\"mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={filledValue} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={filledValue} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={filledValue} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-overflow.story.js CHANGED Viewed

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-w-80", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "3", children: "Tab 4" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "4", children: "Tab 5" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "5", children: "Tab 6" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "6", children: "Tab 7" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "7", children: "Tab 8" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "8", children: "Tab 9" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "9", children: "Tab 10 is waay too long and will be cut off on smaller screens" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "3", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 4 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "4", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 5 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "5", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 6 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "6", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 7 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "7", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 8 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "8", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 9 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "9", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 10 content" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-80", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "3", children: "Tab 4" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "4", children: "Tab 5" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "5", children: "Tab 6" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "6", children: "Tab 7" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "7", children: "Tab 8" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "8", children: "Tab 9" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "9", children: "Tab 10 is waay too long and will be cut off on smaller screens" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "3", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 4 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "4", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 5 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "5", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 6 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "6", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 7 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "7", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 8 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "8", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 9 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "9", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 10 content" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-overflow.story.js.map

package/lib/cjs/tabs/stories/tabs-overflow.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-overflow.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-overflow.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAS,GAAG,CAAC,CAAC;IAEhD,OAAO,CACL,iCAAK,SAAS,EAAC,~~QAAQ~~,~~aACrB~~,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,~~cAAc~~,~~aAC9D~~,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,+EAEL,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,+BAA4B,GAC/C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [value, setValue] = useState<string>('0');\n\n return (\n <div className=\"n-w-80\">\n <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n <Tabs.Tab id=\"3\">Tab 4</Tabs.Tab>\n <Tabs.Tab id=\"4\">Tab 5</Tabs.Tab>\n <Tabs.Tab id=\"5\">Tab 6</Tabs.Tab>\n <Tabs.Tab id=\"6\">Tab 7</Tabs.Tab>\n <Tabs.Tab id=\"7\">Tab 8</Tabs.Tab>\n <Tabs.Tab id=\"8\">Tab 9</Tabs.Tab>\n <Tabs.Tab id=\"9\">\n Tab 10 is waay too long and will be cut off on smaller screens\n </Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={value} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"3\">\n <Typography variant=\"body-medium\">Tab 4 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"4\">\n <Typography variant=\"body-medium\">Tab 5 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"5\">\n <Typography variant=\"body-medium\">Tab 6 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"6\">\n <Typography variant=\"body-medium\">Tab 7 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"7\">\n <Typography variant=\"body-medium\">Tab 8 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"8\">\n <Typography variant=\"body-medium\">Tab 9 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"9\">\n <Typography variant=\"body-medium\">Tab 10 content</Typography>\n </Tabs.TabPanel>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"tabs-overflow.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-overflow.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [value, setValue] = useState<string>('0');\n\n return (\n <div className=\"w-80\">\n <Tabs value={value} onChange={setValue} className=\"mb-token-8\">\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n <Tabs.Tab id=\"3\">Tab 4</Tabs.Tab>\n <Tabs.Tab id=\"4\">Tab 5</Tabs.Tab>\n <Tabs.Tab id=\"5\">Tab 6</Tabs.Tab>\n <Tabs.Tab id=\"6\">Tab 7</Tabs.Tab>\n <Tabs.Tab id=\"7\">Tab 8</Tabs.Tab>\n <Tabs.Tab id=\"8\">Tab 9</Tabs.Tab>\n <Tabs.Tab id=\"9\">\n Tab 10 is waay too long and will be cut off on smaller screens\n </Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={value} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"3\">\n <Typography variant=\"body-medium\">Tab 4 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"4\">\n <Typography variant=\"body-medium\">Tab 5 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"5\">\n <Typography variant=\"body-medium\">Tab 6 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"6\">\n <Typography variant=\"body-medium\">Tab 7 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"7\">\n <Typography variant=\"body-medium\">Tab 8 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"8\">\n <Typography variant=\"body-medium\">Tab 9 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={value} tabId=\"9\">\n <Typography variant=\"body-medium\">Tab 10 content</Typography>\n </Tabs.TabPanel>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-sizes.story.js CHANGED Viewed

@@ -27,7 +27,7 @@ const react_2 = require("react");
 const Component = () => {
     const [smallValue, setSmallValue] = (0, react_2.useState)('0');
     const [largeValue, setLargeValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Small Size" }), (0, jsx_runtime_1.jsxs)("div", { className: "n-w-fit", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: smallValue, onChange: setSmallValue, size: "small", className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 3" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Large Size (Default)" }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: largeValue, onChange: setLargeValue, size: "large", className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 3" }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Small Size" }), (0, jsx_runtime_1.jsxs)("div", { className: "w-fit", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: smallValue, onChange: setSmallValue, size: "small", className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 3" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Large Size (Default)" }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: largeValue, onChange: setLargeValue, size: "large", className: "mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 3" }) })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-sizes.story.js.map

package/lib/cjs/tabs/stories/tabs-sizes.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-sizes.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE7D,OAAO,CACL,iCAAK,SAAS,EAAC,~~sBAAsB~~,~~aACnC~~,iCAAK,SAAS,EAAC,~~iCAAiC~~,~~aAC9C~~,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,2BAAwB,EACnD,iCAAK,SAAS,EAAC,~~SAAS~~,~~aACtB~~,wBAAC,YAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,~~cAAc~~,~~aAExB~~,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,~~iCAAiC~~,~~aAC9C~~,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,qCAAkC,EAC7D,wBAAC,YAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,~~cAAc~~,~~aAExB~~,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [smallValue, setSmallValue] = useState<TabValues>('0');\n const [largeValue, setLargeValue] = useState<TabValues>('0');\n\n return (\n <div className=\"n-flex n-gap-token-8\">\n <div className=\"n-flex n-flex-col n-gap-token-8\">\n <Typography variant=\"label\">Small Size</Typography>\n <div className=\"n-w-fit\">\n <Tabs\n value={smallValue}\n onChange={setSmallValue}\n size=\"small\"\n className=\"n-mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={smallValue} tabId=\"0\">\n <Typography variant=\"body-small\">\n Content for small tab 1\n </Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={smallValue} tabId=\"1\">\n <Typography variant=\"body-small\">\n Content for small tab 2\n </Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={smallValue} tabId=\"2\">\n <Typography variant=\"body-small\">\n Content for small tab 3\n </Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n\n <div className=\"n-flex n-flex-col n-gap-token-8\">\n <Typography variant=\"label\">Large Size (Default)</Typography>\n <Tabs\n value={largeValue}\n onChange={setLargeValue}\n size=\"large\"\n className=\"n-mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={largeValue} tabId=\"0\">\n <Typography variant=\"body-medium\">Content for large tab 1</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={largeValue} tabId=\"1\">\n <Typography variant=\"body-medium\">Content for large tab 2</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={largeValue} tabId=\"2\">\n <Typography variant=\"body-medium\">Content for large tab 3</Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"tabs-sizes.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE7D,OAAO,CACL,iCAAK,SAAS,EAAC,kBAAkB,aAC/B,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,2BAAwB,EACnD,iCAAK,SAAS,EAAC,OAAO,aACpB,wBAAC,YAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,YAAY,aAEtB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,qCAAkC,EAC7D,wBAAC,YAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,YAAY,aAEtB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [smallValue, setSmallValue] = useState<TabValues>('0');\n const [largeValue, setLargeValue] = useState<TabValues>('0');\n\n return (\n <div className=\"flex gap-token-8\">\n <div className=\"flex flex-col gap-token-8\">\n <Typography variant=\"label\">Small Size</Typography>\n <div className=\"w-fit\">\n <Tabs\n value={smallValue}\n onChange={setSmallValue}\n size=\"small\"\n className=\"mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={smallValue} tabId=\"0\">\n <Typography variant=\"body-small\">\n Content for small tab 1\n </Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={smallValue} tabId=\"1\">\n <Typography variant=\"body-small\">\n Content for small tab 2\n </Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={smallValue} tabId=\"2\">\n <Typography variant=\"body-small\">\n Content for small tab 3\n </Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n\n <div className=\"flex flex-col gap-token-8\">\n <Typography variant=\"label\">Large Size (Default)</Typography>\n <Tabs\n value={largeValue}\n onChange={setLargeValue}\n size=\"large\"\n className=\"mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={largeValue} tabId=\"0\">\n <Typography variant=\"body-medium\">Content for large tab 1</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={largeValue} tabId=\"1\">\n <Typography variant=\"body-medium\">Content for large tab 2</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={largeValue} tabId=\"2\">\n <Typography variant=\"body-medium\">Content for large tab 3</Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}