@neo4j-ndl/react 3.9.24 → 4.0.0-alpha.0.aeb5d94

package/lib/cjs/switch/stories/switch-full.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-full.story.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAC1C,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAE3D,MAAM,WAAW,GAAG,CAAC,KAAyC,EAAE,EAAE;QAChE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACnC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,cAAM,IACL,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,6CAA6C,EACvD,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,KAAK,EACvB,cAAc,EAAE,KAAK,EACrB,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,KAAK,EACd,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,GACtB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"switch-full.story.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAC1C,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAE3D,MAAM,WAAW,GAAG,CAAC,KAAyC,EAAE,EAAE;QAChE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACnC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,cAAM,IACL,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,6CAA6C,EACvD,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,KAAK,EACrB,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,KAAK,EACd,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,GACtB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/switch/stories/switch-indeterminate.story.js

@@ -24,10 +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.jsx)(react_1.Switch, { label: "Label", ref: (node) => {
-            if (node)
-                node.indeterminate = true;
-        } }));
+    return (0, jsx_runtime_1.jsx)(react_1.Switch, { label: "Label", isIndeterminate: true });
 };
 exports.default = Component;
 //# sourceMappingURL=switch-indeterminate.story.js.map

package/lib/cjs/switch/stories/switch-indeterminate.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-indeterminate.story.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch-indeterminate.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,KAAK,EAAC,OAAO,EACb,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACZ,IAAI,IAAI;gBAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QACtC,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"switch-indeterminate.story.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch-indeterminate.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,uBAAC,cAAM,IAAC,KAAK,EAAC,OAAO,EAAC,eAAe,SAAG,CAAC;AAClD,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/switch/stories/switch.stories.js

@@ -21,7 +21,7 @@
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Full = exports.Disabled = exports.HasLabelBefore = exports.NoLabel = exports.CheckedByDefault = exports.Indeterminate = exports.Default = void 0;
+exports.Full = exports.Disabled = exports.HasLabelBefore = exports.NoLabel = exports.Checked = exports.Indeterminate = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_1 = require("../../index");
 const _1 = require("./");
@@ -69,15 +69,15 @@ exports.Indeterminate = {
         },
     },
 };
-exports.CheckedByDefault = {
+exports.Checked = {
     args: {},
-    render: _1.SwitchCheckedByDefault,
+    render: _1.SwitchChecked,
     parameters: {
         docs: {
             source: {
                 language: 'tsx',
                 type: 'code',
-                code: _1.SwitchCheckedByDefaultSrc,
+                code: _1.SwitchCheckedSrc,
             },
         },
     },

package/lib/cjs/switch/stories/switch.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.stories.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch.stories.tsx"],"names":[],"mappings":";;;;AAsBA,uCAAqC;AACrC,yBAeY;AAEZ,MAAM,aAAa,GAAwB;IACzC,KAAK,EAAE,mBAAmB;IAC1B,EAAE,EAAE,mBAAmB;IACvB,SAAS,EAAE,cAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,WAAW,EAAE,4BAA4B;SAC1C;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KAC5B;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,kBAAe,aAAa,CAAC;AAGhB,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,gBAAa;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,mBAAgB;aACvB;SACF;KACF;CACF,CAAC;AAEW,QAAA,aAAa,GAAU;IAClC,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,sBAAmB;IAC3B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,yBAAsB;aAC7B;SACF;KACF;CACF,CAAC;AAEW,QAAA,gBAAgB,GAAU;IACrC,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,yBAAsB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,4BAAyB;aAChC;SACF;KACF;CACF,CAAC;AAEW,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,gBAAa;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,mBAAgB;aACvB;SACF;KACF;CACF,CAAC;AAEW,QAAA,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,uBAAoB;IAC5B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,0BAAuB;aAC9B;SACF;KACF;CACF,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,iBAAc;IACtB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,oBAAiB;aACxB;SACF;KACF;CACF,CAAC;AAEW,QAAA,IAAI,GAAU;IACzB,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,aAAU;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,gBAAa;aACpB;SACF;KACF;CACF,CAAC"}
+{"version":3,"file":"switch.stories.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch.stories.tsx"],"names":[],"mappings":";;;;AAsBA,uCAAqC;AACrC,yBAeY;AAEZ,MAAM,aAAa,GAAwB;IACzC,KAAK,EAAE,mBAAmB;IAC1B,EAAE,EAAE,mBAAmB;IACvB,SAAS,EAAE,cAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,WAAW,EAAE,4BAA4B;SAC1C;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KAC5B;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,kBAAe,aAAa,CAAC;AAGhB,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,gBAAa;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,mBAAgB;aACvB;SACF;KACF;CACF,CAAC;AAEW,QAAA,aAAa,GAAU;IAClC,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,sBAAmB;IAC3B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,yBAAsB;aAC7B;SACF;KACF;CACF,CAAC;AAEW,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,gBAAa;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,mBAAgB;aACvB;SACF;KACF;CACF,CAAC;AAEW,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,gBAAa;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,mBAAgB;aACvB;SACF;KACF;CACF,CAAC;AAEW,QAAA,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,uBAAoB;IAC5B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,0BAAuB;aAC9B;SACF;KACF;CACF,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,iBAAc;IACtB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,oBAAiB;aACxB;SACF;KACF;CACF,CAAC;AAEW,QAAA,IAAI,GAAU;IACzB,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,aAAU;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,gBAAa;aACpB;SACF;KACF;CACF,CAAC"}

package/lib/cjs/tabs/Tabs.js

@@ -15,12 +15,36 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
@@ -45,13 +69,29 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-const react_1 = __importStar(require("react"));
-const defaultImports_1 = require("../_common/defaultImports");
-const helpers_1 = require("../helpers");
+const react_1 = require("@floating-ui/react");
+const classnames_1 = __importDefault(require("classnames"));
+const react_2 = __importStar(require("react"));
+const icons_1 = require("../icons");
+const tooltip_1 = require("../tooltip");
+const typography_1 = require("../typography");
+const use_tabs_scroll_overflow_1 = require("./use-tabs-scroll-overflow");
+// Reusable scroll button component
+const ScrollButton = ({ direction, isVisible, onClick, onBackground, }) => {
+    const Icon = direction === 'left'
+        ? icons_1.ArrowLeftCircleIconOutline
+        : icons_1.ArrowRightCircleIconOutline;
+    const positionClass = direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-scroll-item', positionClass, {
+            'ndl-scroll-item-hidden': !isVisible,
+            'ndl-scroll-item-on-background-default': onBackground === 'default',
+            'ndl-scroll-item-on-background-weak': onBackground === 'weak',
+        }), children: (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, className: "ndl-scroll-icon-wrapper", onClick: onClick, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon, { className: "ndl-scroll-icon" }) }) }));
+};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TabsContext = react_1.default.createContext(null);
+const TabsContext = react_2.default.createContext(null);
 const useTabsContext = () => {
-    const context = (0, react_1.useContext)(TabsContext);
+    const context = (0, react_2.useContext)(TabsContext);
     if (context === null) {
         throw new Error('Tab used without context');
     }
@@ -66,15 +106,40 @@ const getGeneralTabClasses = (size, fill) => {
         'ndl-underline-tab': fill === 'underline',
     };
 };
-const TabsComponent = (0, helpers_1.forwardRef)(function TabsComponent({ children, size = 'large', fill = 'underline', onChange, value, className, style, as, htmlAttributes, }, ref) {
-    const tabRefs = (0, react_1.useRef)(new Map());
-    const registerTab = (0, react_1.useCallback)((tabId, tabRef) => {
+const TabsComponent = (_a) => {
+    var { children, size = 'large', fill = 'underline', onChange, value, onBackground = 'weak', className, style, as, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "size", "fill", "onChange", "value", "onBackground", "className", "style", "as", "htmlAttributes", "ref"]);
+    const tabRefs = (0, react_2.useRef)(new Map());
+    const containerRef = (0, react_2.useRef)(null);
+    const scrollContainerRef = (0, react_2.useRef)(null);
+    const mergedRef = (0, react_1.useMergeRefs)([containerRef, ref]);
+    // Use the custom hook for scroll overflow behavior
+    const { scrollState, scrollToNextItem, checkOverflow } = (0, use_tabs_scroll_overflow_1.useTabsScrollOverflow)(scrollContainerRef);
+    const registerTab = (0, react_2.useCallback)((tabId, tabRef) => {
         tabRefs.current.set(tabId, tabRef);
     }, []);
-    const unregisterTab = (0, react_1.useCallback)((tabId) => {
+    const unregisterTab = (0, react_2.useCallback)((tabId) => {
         tabRefs.current.delete(tabId);
     }, []);
-    const handleKeyDown = (0, react_1.useCallback)((event) => {
+    // Check overflow when children change
+    (0, react_2.useEffect)(() => {
+        checkOverflow();
+    }, [checkOverflow, children]);
+    const scrollTabIntoView = (0, react_2.useCallback)((tabId) => {
+        const tabRef = tabRefs.current.get(tabId);
+        const scrollContainer = scrollContainerRef.current;
+        if ((tabRef === null || tabRef === void 0 ? void 0 : tabRef.current) && scrollContainer) {
+            const tabRect = tabRef.current.getBoundingClientRect();
+            const containerRect = scrollContainer.getBoundingClientRect();
+            const containerCenter = containerRect.left + containerRect.width / 2;
+            const targetScrollLeft = scrollContainer.scrollLeft +
+                (tabRect.left - containerCenter + tabRect.width / 2);
+            scrollContainer.scrollTo({
+                behavior: 'smooth',
+                left: targetScrollLeft,
+            });
+        }
+    }, []);
+    const handleKeyDown = (0, react_2.useCallback)((event) => {
         if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
             return;
         }
@@ -109,46 +174,65 @@ const TabsComponent = (0, helpers_1.forwardRef)(function TabsComponent({ childre
         const nextTabRef = tabRefs.current.get(nextTabId);
         if (nextTabRef === null || nextTabRef === void 0 ? void 0 : nextTabRef.current) {
             nextTabRef.current.focus();
+            scrollTabIntoView(nextTabId);
         }
-    }, [value]);
-    const classes = (0, defaultImports_1.classNames)('ndl-tabs', getGeneralTabClasses(size, fill), className);
+    }, [value, scrollTabIntoView]);
+    const classes = (0, classnames_1.default)('ndl-tabs', getGeneralTabClasses(size, fill), className);
     const Component = as !== null && as !== void 0 ? as : 'div';
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, style: style, role: "tablist", "aria-orientation": "horizontal", onKeyDown: handleKeyDown, ref: ref }, htmlAttributes, { children: (0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: { fill, onChange, registerTab, size, unregisterTab, value }, children: children }) })));
-});
-TabsComponent.displayName =
-    'Tabs';
-const TabsTab = (0, helpers_1.forwardRef)(function TabsTab({ children, tabId, isDisabled = false, className, style, as, htmlAttributes, }, ref) {
-    const { size, fill, value, onChange, registerTab, unregisterTab } = useTabsContext();
-    const internalRef = (0, react_1.useRef)(null);
-    const tabRef = ref !== null && ref !== void 0 ? ref : internalRef;
+    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, role: "tablist", "aria-orientation": "horizontal", onKeyDown: handleKeyDown, ref: mergedRef }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(ScrollButton, { direction: "left", isVisible: scrollState.isLeftVisible, onClick: () => scrollToNextItem('left'), onBackground: onBackground }), (0, jsx_runtime_1.jsx)(ScrollButton, { direction: "right", isVisible: scrollState.isRightVisible, onClick: () => scrollToNextItem('right'), onBackground: onBackground }), (0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: {
+                    fill,
+                    onChange,
+                    registerTab,
+                    scrollTabIntoView,
+                    size,
+                    unregisterTab,
+                    value,
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-tabs-container", ref: scrollContainerRef, children: children }) })] })));
+};
+TabsComponent.displayName = 'Tabs';
+const TabsTab = (_a) => {
+    var { children, id: tabId, isDisabled = false, className, tooltip, tooltipProps, style, as, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "id", "isDisabled", "className", "tooltip", "tooltipProps", "style", "as", "htmlAttributes", "ref"]);
+    const { size, fill, value, onChange, registerTab, unregisterTab, scrollTabIntoView, } = useTabsContext();
+    const internalRef = (0, react_2.useRef)(null);
+    // Create a merged ref that handles both ref objects and ref functions
+    const mergedRef = (0, react_1.useMergeRefs)([
+        internalRef,
+        ref,
+    ]);
     // Register/unregister tab for keyboard navigation
-    (0, react_1.useEffect)(() => {
-        const refObject = typeof tabRef === 'function' || tabRef === null ? internalRef : tabRef;
-        registerTab(tabId, refObject);
+    (0, react_2.useEffect)(() => {
+        registerTab(tabId, internalRef);
         return () => {
             unregisterTab(tabId);
         };
-    }, [tabId, registerTab, unregisterTab, tabRef]);
-    const baseClasses = (0, defaultImports_1.classNames)(Object.assign(Object.assign({}, getGeneralTabClasses(size, fill)), { 'ndl-disabled': isDisabled, 'ndl-selected': value === tabId }));
+    }, [tabId, registerTab, unregisterTab]);
+    const baseClasses = (0, classnames_1.default)(Object.assign(Object.assign({}, getGeneralTabClasses(size, fill)), { 'ndl-disabled': isDisabled, 'ndl-selected': value === tabId }));
     const Component = as !== null && as !== void 0 ? as : 'button';
-    // Cast onChange since the compiler isn't smart enough to figure out union of function's parameters
-    // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-3.html#improved-behavior-for-calling-union-types
-    // https://stackoverflow.com/questions/55572797/why-does-typescript-expect-never-as-function-argument-when-retrieving-the-func
-    const castOnChange = onChange;
-    const handleChange = () => !isDisabled && castOnChange(tabId);
-    const classes = (0, defaultImports_1.classNames)('ndl-tab', baseClasses, className);
+    const classes = (0, classnames_1.default)('ndl-tab', baseClasses, className);
     // Only the active tab should be in the tab sequence initially
     // Other tabs can be focused via arrow keys but are not in tab sequence
     const tabIndex = value === tabId ? 0 : -1;
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, onClick: handleChange, role: "tab", id: tabId, "aria-selected": value === tabId, "aria-controls": getTabPanelId(tabId), tabIndex: tabIndex, ref: tabRef }, htmlAttributes, { children: [children, fill === 'underline' && (0, jsx_runtime_1.jsx)("span", { className: "ndl-tab-underline" })] })));
-});
+    return ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({ type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { isDisabled: tooltip === undefined, children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, onClick: () => {
+                        if (!isDisabled) {
+                            onChange(tabId);
+                            scrollTabIntoView(tabId);
+                        }
+                    }, role: "tab", id: tabId, "aria-disabled": isDisabled, "aria-selected": value === tabId, "aria-controls": getTabPanelId(tabId), tabIndex: tabIndex, ref: mergedRef }, restProps, htmlAttributes, { 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: tooltip }))] })));
+};
 TabsTab.displayName = 'Tabs.Tab';
-const TabsTabPanel = react_1.default.forwardRef(function TabsTabPanel({ as, children, value, tabId, style, className, htmlAttributes, }, ref) {
+const TabsTabPanel = (_a) => {
+    var { as, children, value, tabId, style, className, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "children", "value", "tabId", "style", "className", "htmlAttributes", "ref"]);
     const Component = as !== null && as !== void 0 ? as : 'div';
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: value === tabId ? ((0, jsx_runtime_1.jsx)(Component, Object.assign({ role: "tabpanel", id: getTabPanelId(tabId), "aria-labelledby": tabId, style: style, className: (0, defaultImports_1.classNames)(className), ref: ref }, htmlAttributes, { children: children }))) : null }));
-});
-// To work with forwardRef: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-894053907
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: value === tabId ? ((0, jsx_runtime_1.jsx)(Component, Object.assign({ role: "tabpanel", id: getTabPanelId(tabId), "aria-labelledby": tabId, style: style, className: (0, classnames_1.default)(className), ref: ref }, restProps, htmlAttributes, { children: children }))) : null }));
+};
+TabsTabPanel.displayName = 'Tabs.TabPanel';
+const TabBadge = (_a) => {
+    var { children, ref, htmlAttributes, style, className } = _a, restProps = __rest(_a, ["children", "ref", "htmlAttributes", "style", "className"]);
+    const classes = (0, classnames_1.default)('ndl-tab-badge', className);
+    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ ref: ref, variant: "subheading-small", className: classes, style: style, htmlAttributes: htmlAttributes }, restProps, { children: children })));
+};
 const Tabs = Object.assign(TabsComponent, {
+    Badge: TabBadge,
     Tab: TabsTab,
     TabPanel: TabsTabPanel,
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/tabs/stories/index.js

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsDisabledSource = exports.TabsWithIconsSource = exports.TabsSizesSource = exports.TabsFillVariantsSource = exports.TabsDefaultSource = exports.TabsDisabled = exports.TabsWithIcons = exports.TabsSizes = exports.TabsFillVariants = exports.TabsDefault = void 0;
+exports.TabsBadgeSource = exports.TabsOverflowSource = exports.TabsDisabledSource = exports.TabsWithIconsSource = exports.TabsSizesSource = exports.TabsFillVariantsSource = exports.TabsDefaultSource = exports.TabsBadge = exports.TabsOverflow = exports.TabsDisabled = exports.TabsWithIcons = exports.TabsSizes = exports.TabsFillVariants = exports.TabsDefault = void 0;
 var tabs_default_story_1 = require("./tabs-default.story");
 Object.defineProperty(exports, "TabsDefault", { enumerable: true, get: function () { return __importDefault(tabs_default_story_1).default; } });
 var tabs_fill_variants_story_1 = require("./tabs-fill-variants.story");
@@ -34,10 +34,16 @@ var tabs_with_icons_story_1 = require("./tabs-with-icons.story");
 Object.defineProperty(exports, "TabsWithIcons", { enumerable: true, get: function () { return __importDefault(tabs_with_icons_story_1).default; } });
 var tabs_disabled_story_1 = require("./tabs-disabled.story");
 Object.defineProperty(exports, "TabsDisabled", { enumerable: true, get: function () { return __importDefault(tabs_disabled_story_1).default; } });
+var tabs_overflow_story_1 = require("./tabs-overflow.story");
+Object.defineProperty(exports, "TabsOverflow", { enumerable: true, get: function () { return __importDefault(tabs_overflow_story_1).default; } });
+var tabs_badge_story_1 = require("./tabs-badge.story");
+Object.defineProperty(exports, "TabsBadge", { enumerable: true, get: function () { return __importDefault(tabs_badge_story_1).default; } });
 const export_stories_utils_1 = require("@neo4j-ndl/react/_common/export-stories-utils");
+const tabs_badge_story_raw_1 = __importDefault(require("./tabs-badge.story?raw"));
 const tabs_default_story_raw_1 = __importDefault(require("./tabs-default.story?raw"));
 const tabs_disabled_story_raw_1 = __importDefault(require("./tabs-disabled.story?raw"));
 const tabs_fill_variants_story_raw_1 = __importDefault(require("./tabs-fill-variants.story?raw"));
+const tabs_overflow_story_raw_1 = __importDefault(require("./tabs-overflow.story?raw"));
 const tabs_sizes_story_raw_1 = __importDefault(require("./tabs-sizes.story?raw"));
 const tabs_with_icons_story_raw_1 = __importDefault(require("./tabs-with-icons.story?raw"));
 exports.TabsDefaultSource = (0, export_stories_utils_1.removeLicenseHeader)(tabs_default_story_raw_1.default);
@@ -45,4 +51,6 @@ exports.TabsFillVariantsSource = (0, export_stories_utils_1.removeLicenseHeader)
 exports.TabsSizesSource = (0, export_stories_utils_1.removeLicenseHeader)(tabs_sizes_story_raw_1.default);
 exports.TabsWithIconsSource = (0, export_stories_utils_1.removeLicenseHeader)(tabs_with_icons_story_raw_1.default);
 exports.TabsDisabledSource = (0, export_stories_utils_1.removeLicenseHeader)(tabs_disabled_story_raw_1.default);
+exports.TabsOverflowSource = (0, export_stories_utils_1.removeLicenseHeader)(tabs_overflow_story_raw_1.default);
+exports.TabsBadgeSource = (0, export_stories_utils_1.removeLicenseHeader)(tabs_badge_story_raw_1.default);
 //# sourceMappingURL=index.js.map

package/lib/cjs/tabs/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tabs/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,uEAAyE;AAAhE,6IAAA,OAAO,OAAoB;AACpC,uDAA0D;AAAjD,8HAAA,OAAO,OAAa;AAC7B,iEAAmE;AAA1D,uIAAA,OAAO,OAAiB;AACjC,6DAAgE;AAAvD,oIAAA,OAAO,OAAgB;AAEhC,wFAAoF;AAEpF,sFAA4D;AAC5D,wFAA8D;AAC9D,kGAAuE;AACvE,kFAAwD;AACxD,4FAAiE;AAEpD,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,sCAAyB,CAC1B,CAAC;AACW,QAAA,eAAe,GAAG,IAAA,0CAAmB,EAAC,8BAAkB,CAAC,CAAC;AAC1D,QAAA,mBAAmB,GAAG,IAAA,0CAAmB,EAAC,mCAAsB,CAAC,CAAC;AAClE,QAAA,kBAAkB,GAAG,IAAA,0CAAmB,EAAC,iCAAqB,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tabs/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,uEAAyE;AAAhE,6IAAA,OAAO,OAAoB;AACpC,uDAA0D;AAAjD,8HAAA,OAAO,OAAa;AAC7B,iEAAmE;AAA1D,uIAAA,OAAO,OAAiB;AACjC,6DAAgE;AAAvD,oIAAA,OAAO,OAAgB;AAChC,6DAAgE;AAAvD,oIAAA,OAAO,OAAgB;AAChC,uDAA0D;AAAjD,8HAAA,OAAO,OAAa;AAE7B,wFAAoF;AAEpF,kFAAwD;AACxD,sFAA4D;AAC5D,wFAA8D;AAC9D,kGAAuE;AACvE,wFAA8D;AAC9D,kFAAwD;AACxD,4FAAiE;AAEpD,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,sCAAyB,CAC1B,CAAC;AACW,QAAA,eAAe,GAAG,IAAA,0CAAmB,EAAC,8BAAkB,CAAC,CAAC;AAC1D,QAAA,mBAAmB,GAAG,IAAA,0CAAmB,EAAC,mCAAsB,CAAC,CAAC;AAClE,QAAA,kBAAkB,GAAG,IAAA,0CAAmB,EAAC,iCAAqB,CAAC,CAAC;AAChE,QAAA,kBAAkB,GAAG,IAAA,0CAAmB,EAAC,iCAAqB,CAAC,CAAC;AAChE,QAAA,eAAe,GAAG,IAAA,0CAAmB,EAAC,8BAAkB,CAAC,CAAC"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+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" }) })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=tabs-badge.story.js.map

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

@@ -0,0 +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,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,aAC9D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,EACjC,wBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,uBACP,uBAAC,YAAI,CAAC,KAAK,oBAAe,IACvB,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YACnC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YACnC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YACnC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -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, children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 0, children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 1, children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 2, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", 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, { className: "n-p-token-4", 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, { className: "n-p-token-4", 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: "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" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-default.story.js.map

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

@@ -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,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,aACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,IAC/B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YAC3D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YAC3D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YAC3D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"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,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,aAC9D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YACnC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YACnC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YACnC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -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, children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 0, children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 1, children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 2, isDisabled: true, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", 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, { className: "n-p-token-4", 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, { className: "n-p-token-4", 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: "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" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-disabled.story.js.map

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

@@ -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,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,aACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,sBAEzB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YAC3D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YAC3D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YAC3D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"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,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,aAC9D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,sBAEtB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YACnC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YACnC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,YACnC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -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-4", 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, children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 0, children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 1, children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 2, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", 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, { className: "n-p-token-4", 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, { className: "n-p-token-4", 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-4", 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", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 0, children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 1, children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 2, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", 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, { className: "n-p-token-4", 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, { className: "n-p-token-4", 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: "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" }) })] })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-fill-variants.story.js.map

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

@@ -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,CAAC,CAAC,CAAC;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAY,CAAC,CAAC,CAAC;IAE7D,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aACnC,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,oCAAiC,EAC5D,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,aACtD,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,IAC/B,EACP,uBAAC,YAAI,CAAC,QAAQ,IACZ,SAAS,EAAC,aAAa,EACvB,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,CAAC,YAER,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IACZ,SAAS,EAAC,aAAa,EACvB,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,CAAC,YAER,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IACZ,SAAS,EAAC,aAAa,EACvB,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,CAAC,YAER,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,IAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAC,QAAQ,aAC/D,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,IAC/B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,YACjE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,YACjE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,YACjE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"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,CAAC,CAAC,CAAC;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAY,CAAC,CAAC,CAAC;IAE7D,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,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,YAC5C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,YAC5C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,YAC5C,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,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+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" })] }), (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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-overflow.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-overflow.story.tsx"],"names":[],"mappings":"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"}

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

@@ -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-4", 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", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 0, children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 1, children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 2, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-2", 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, { className: "n-p-token-2", 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, { className: "n-p-token-2", 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-4", 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", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 0, children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 1, children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 2, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", 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, { className: "n-p-token-4", 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, { className: "n-p-token-4", 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: "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" }) })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-sizes.story.js.map

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

@@ -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,CAAC,CAAC,CAAC;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,CAAC,CAAC,CAAC;IAE3D,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,IAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAC,OAAO,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,IAC/B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,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,IAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAC,OAAO,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,IAC/B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"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,CAAC,CAAC,CAAC;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,CAAC,CAAC,CAAC;IAE3D,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,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YACxC,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,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAE,CAAC,sBAAkB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/tabs/stories/tabs-with-icons.story.js

@@ -27,7 +27,7 @@ const icons_1 = require("@neo4j-ndl/react/icons");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('database');
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: "database", "aria-label": "Database", children: (0, jsx_runtime_1.jsx)(icons_1.CircleStackIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: "add", "aria-label": "Add database", children: (0, jsx_runtime_1.jsx)(icons_1.DatabaseAddCircleIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: "inbox", "aria-label": "Inbox", children: (0, jsx_runtime_1.jsx)(icons_1.InboxArrowDownIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", value: value, tabId: "database", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Database management and operations." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", value: value, tabId: "add", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Add new database or connection." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-4", value: value, tabId: "inbox", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Inbox notifications and messages." }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-mt-5", 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: "database", tooltip: "Database", children: (0, jsx_runtime_1.jsx)(icons_1.CircleStackIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "add", tooltip: "Add database", children: (0, jsx_runtime_1.jsx)(icons_1.DatabaseAddCircleIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "inbox", tooltip: "Inbox", children: (0, jsx_runtime_1.jsx)(icons_1.InboxArrowDownIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "database", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Database management and operations." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "add", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Add new database or connection." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "inbox", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Inbox notifications and messages." }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-with-icons.story.js.map