@popsure/dirty-swan 0.66.19 → 0.66.21

package/dist/cjs/lib/components/table/Table.d.ts

@@ -26,6 +26,7 @@ export interface TableProps {
     hideTableNavigation?: boolean;
     hideStickyHeader?: boolean;
     showSelectedColumn?: boolean;
+    mobileNavigationMode?: 'arrows' | 'tabs';
 }
-declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, hideStickyHeader, showSelectedColumn, }: TableProps) => JSX.Element;
+declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, hideStickyHeader, showSelectedColumn, mobileNavigationMode, }: TableProps) => JSX.Element;
 export { Table };

package/dist/cjs/lib/components/table/Table.stories.d.ts

@@ -2,7 +2,7 @@ import { TableProps } from './Table';
 import { TableData } from './types';
 declare const story: {
     title: string;
-    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, hideStickyHeader, showSelectedColumn, }: TableProps) => JSX.Element;
+    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, hideStickyHeader, showSelectedColumn, mobileNavigationMode, }: TableProps) => JSX.Element;
     argTypes: {
         tableData: {
             subContent: string;
@@ -91,9 +91,17 @@ export declare const TwoPlanQuoteWebsite: {
     render: () => JSX.Element;
     name: string;
 };
+export declare const TwoPlanQuote: {
+    render: () => JSX.Element;
+    name: string;
+};
 export declare const ThreePlanQuoteWebsite: {
     render: () => JSX.Element;
     name: string;
 };
+export declare const TabsNavigationMobile: {
+    render: () => JSX.Element;
+    name: string;
+};
 export declare const TableDataType: () => JSX.Element;
 export default story;

package/dist/cjs/lib/components/table/components/TableContents/TableContents.d.ts

@@ -17,6 +17,7 @@ export interface TableContentsProps {
     cellReplacements?: CellReplacements;
     imageComponent?: (args: any) => JSX.Element;
     selectedColumn?: number;
+    showHeader?: boolean;
 }
-declare const TableContents: ({ className, collapsibleSections, scrollOnOpen, scrollTopOffset, stickyHeaderRef, tableData, hideColumns, hideDetails, hideRows, isMobile, openModal, shouldHideDetails, title, cellReplacements, imageComponent, selectedColumn, }: TableContentsProps) => JSX.Element;
+declare const TableContents: ({ className, collapsibleSections, scrollOnOpen, scrollTopOffset, stickyHeaderRef, tableData, hideColumns, hideDetails, hideRows, isMobile, openModal, shouldHideDetails, title, cellReplacements, imageComponent, selectedColumn, showHeader, }: TableContentsProps) => JSX.Element;
 export { TableContents };

package/dist/cjs/lib/components/tabs/Tabs.d.ts

@@ -0,0 +1,12 @@
+export interface TabItem {
+    id: string;
+    label: string;
+}
+export interface TabsProps {
+    tabs: TabItem[];
+    activeIndex: number;
+    onTabChange: (index: number) => void;
+    className?: string;
+}
+declare const Tabs: ({ tabs, activeIndex, onTabChange, className }: TabsProps) => JSX.Element;
+export { Tabs };

package/dist/cjs/lib/components/tabs/Tabs.stories.d.ts

@@ -0,0 +1,45 @@
+import { TabsProps } from './Tabs';
+declare const story: {
+    title: string;
+    component: ({ tabs, activeIndex, onTabChange, className }: TabsProps) => JSX.Element;
+    argTypes: {
+        tabs: {
+            description: string;
+        };
+        activeIndex: {
+            description: string;
+        };
+        onTabChange: {
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        className: {
+            description: string;
+        };
+    };
+    args: {
+        tabs: {
+            id: string;
+            label: string;
+        }[];
+        activeIndex: number;
+    };
+    parameters: {
+        componentSubtitle: string;
+    };
+};
+export declare const Default: {
+    render: ({ tabs, activeIndex, onTabChange }: TabsProps) => JSX.Element;
+    name: string;
+};
+export declare const TwoTabs: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const ManyTabs: {
+    render: () => JSX.Element;
+    name: string;
+};
+export default story;

package/dist/cjs/lib/index.d.ts

@@ -28,6 +28,7 @@ import { Toaster, toast } from './components/toast';
 import { IconWrapperProps } from './components/icon/IconWrapper';
 import { Accordion, AccordionProps } from './components/accordion';
 import { Table, TableData, TableProps } from './components/table/Table';
+import { Tabs, TabsProps, TabItem } from './components/tabs/Tabs';
 import { useEscapeKey } from './hooks/useEscapeKey';
 import { useFocusWithin } from './hooks/useFocusWithin';
 import { useMediaQuery } from './hooks/useMediaQuery';
@@ -41,6 +42,6 @@ import { LogoInverted } from './components/logo/LogoInverted';
 import { LogoPositiveColor } from './components/logo/LogoPositiveColor';
 import { LogoPositiveBlack } from './components/logo/LogoPositiveBlack';
 export * from './components/icon';
-export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SearchableDropdown, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useOnClickOutside, useMediaQuery, LogoColor, LogoWhite, LogoBlack, LogoOrangeBox, LogoInvertedColor, LogoInverted, LogoPositiveColor, LogoPositiveBlack, };
-export type { AccordionProps, SearchableDropdownProps, SearchableDropdownOption, BadgeProps, IllustrationKeys, InformationBoxProps, InputProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TableData, TableProps, };
+export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SearchableDropdown, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Tabs, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useOnClickOutside, useMediaQuery, LogoColor, LogoWhite, LogoBlack, LogoOrangeBox, LogoInvertedColor, LogoInverted, LogoPositiveColor, LogoPositiveBlack, };
+export type { AccordionProps, SearchableDropdownProps, SearchableDropdownOption, BadgeProps, IllustrationKeys, InformationBoxProps, InputProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TabItem, TabsProps, TableData, TableProps, };
 export type { DownloadStatus } from './models/download';

package/dist/esm/components/icon/icons/CircleSelected.js

@@ -6,9 +6,9 @@ import '../../../index-DLQEsiym.js';
 import '../../../_commonjsHelpers-BFTU3MAI.js';
 import '../../../style-inject.es-tgCJW-Cu.js';
 
-var CircleSelected = (function (props) {
+var CircleSelectedIcon = (function (props) {
     return createElement(IconWrapper, props, jsxs("g", { fill: "currentColor", clipPath: "url(#circle-selected_svg__a)", children: [jsx("path", { fillRule: "evenodd", d: "M12 2.182c-5.422 0-9.818 4.396-9.818 9.818S6.578 21.818 12 21.818s9.818-4.396 9.818-9.818S17.422 2.182 12 2.182ZM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Z", clipRule: "evenodd" }), jsx("circle", { cx: 12, cy: 12, r: 7 })] }), jsx("defs", { children: jsx("clipPath", { id: "circle-selected_svg__a", children: jsx("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) }));
 });
 
-export { CircleSelected as default };
+export { CircleSelectedIcon as default };
 //# sourceMappingURL=CircleSelected.js.map

package/dist/esm/components/icon/icons/CircleSelected.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircleSelected.js","sources":["../../../../../../src/lib/components/icon/icons/CircleSelected.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n  createElement(\n    IconWrapper,\n    props,\n    <g fill=\"currentColor\" clipPath=\"url(#circle-selected_svg__a)\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M12 2.182c-5.422 0-9.818 4.396-9.818 9.818S6.578 21.818 12 21.818s9.818-4.396 9.818-9.818S17.422 2.182 12 2.182ZM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Z\"\n        clipRule=\"evenodd\"\n      />\n      <circle cx={12} cy={12} r={7} />\n    </g>,\n    <defs>\n      <clipPath id=\"circle-selected_svg__a\">\n        <path fill=\"#fff\" d=\"M0 0h24v24H0z\" />\n      </clipPath>\n    </defs>\n  );\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAIA,qBAAA,CAAe,UAAC,KAAuB,EAAA;AACrC,IAAA,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,IAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,8BAA8B,EAAA,QAAA,EAAA,CAC5DC,GAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yLAAyL,EAC3L,QAAQ,EAAC,SAAS,EAAA,CAClB,EACFA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAA,CAAI,CAAA,EAAA,CAC9B,EACJA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAA,UAAA,EAAA,EAAU,EAAE,EAAC,wBAAwB,EAAA,QAAA,EACnCA,GAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,EAAA,CAAG,EAAA,CAC7B,GACN,CACR;AAhBD,CAgBC;;;;"}
+{"version":3,"file":"CircleSelected.js","sources":["../../../../../../src/lib/components/icon/icons/CircleSelected.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n  createElement(\n    IconWrapper,\n    props,\n    <g fill=\"currentColor\" clipPath=\"url(#circle-selected_svg__a)\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M12 2.182c-5.422 0-9.818 4.396-9.818 9.818S6.578 21.818 12 21.818s9.818-4.396 9.818-9.818S17.422 2.182 12 2.182ZM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Z\"\n        clipRule=\"evenodd\"\n      />\n      <circle cx={12} cy={12} r={7} />\n    </g>,\n    <defs>\n      <clipPath id=\"circle-selected_svg__a\">\n        <path fill=\"#fff\" d=\"M0 0h24v24H0z\" />\n      </clipPath>\n    </defs>\n  );\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAIA,yBAAA,CAAe,UAAC,KAAuB,EAAA;AACrC,IAAA,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,IAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,8BAA8B,EAAA,QAAA,EAAA,CAC5DC,GAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yLAAyL,EAC3L,QAAQ,EAAC,SAAS,EAAA,CAClB,EACFA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAA,CAAI,CAAA,EAAA,CAC9B,EACJA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAA,UAAA,EAAA,EAAU,EAAE,EAAC,wBAAwB,EAAA,QAAA,EACnCA,GAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,EAAA,CAAG,EAAA,CAC7B,GACN,CACR;AAhBD,CAgBC;;;;"}

package/dist/esm/components/icon/icons/CircleUnselected.js

@@ -6,9 +6,9 @@ import '../../../index-DLQEsiym.js';
 import '../../../_commonjsHelpers-BFTU3MAI.js';
 import '../../../style-inject.es-tgCJW-Cu.js';
 
-var CircleUnselected = (function (props) {
+var CircleUnselectedIcon = (function (props) {
     return createElement(IconWrapper, props, jsx("g", { clipPath: "url(#circle-unselected_svg__a)", children: jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 2.182c-5.422 0-9.818 4.396-9.818 9.818S6.578 21.818 12 21.818s9.818-4.396 9.818-9.818S17.422 2.182 12 2.182ZM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Z", clipRule: "evenodd" }) }), jsx("defs", { children: jsx("clipPath", { id: "circle-unselected_svg__a", children: jsx("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) }));
 });
 
-export { CircleUnselected as default };
+export { CircleUnselectedIcon as default };
 //# sourceMappingURL=CircleUnselected.js.map

package/dist/esm/components/icon/icons/CircleUnselected.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircleUnselected.js","sources":["../../../../../../src/lib/components/icon/icons/CircleUnselected.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n  createElement(\n    IconWrapper,\n    props,\n    <g clipPath=\"url(#circle-unselected_svg__a)\">\n      <path\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        d=\"M12 2.182c-5.422 0-9.818 4.396-9.818 9.818S6.578 21.818 12 21.818s9.818-4.396 9.818-9.818S17.422 2.182 12 2.182ZM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Z\"\n        clipRule=\"evenodd\"\n      />\n    </g>,\n    <defs>\n      <clipPath id=\"circle-unselected_svg__a\">\n        <path fill=\"#fff\" d=\"M0 0h24v24H0z\" />\n      </clipPath>\n    </defs>\n  );\n"],"names":["_jsx"],"mappings":";;;;;;;;AAIA,uBAAA,CAAe,UAAC,KAAuB,EAAA;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,QAAQ,EAAC,gCAAgC,YAC1CA,GAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yLAAyL,EAC3L,QAAQ,EAAC,SAAS,EAAA,CAClB,EAAA,CACA,EACJA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAA,UAAA,EAAA,EAAU,EAAE,EAAC,0BAA0B,EAAA,QAAA,EACrCA,cAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,EAAA,CAAG,EAAA,CAC7B,EAAA,CACN,CACR;AAhBD,CAgBC;;;;"}
+{"version":3,"file":"CircleUnselected.js","sources":["../../../../../../src/lib/components/icon/icons/CircleUnselected.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n  createElement(\n    IconWrapper,\n    props,\n    <g clipPath=\"url(#circle-unselected_svg__a)\">\n      <path\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        d=\"M12 2.182c-5.422 0-9.818 4.396-9.818 9.818S6.578 21.818 12 21.818s9.818-4.396 9.818-9.818S17.422 2.182 12 2.182ZM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Z\"\n        clipRule=\"evenodd\"\n      />\n    </g>,\n    <defs>\n      <clipPath id=\"circle-unselected_svg__a\">\n        <path fill=\"#fff\" d=\"M0 0h24v24H0z\" />\n      </clipPath>\n    </defs>\n  );\n"],"names":["_jsx"],"mappings":";;;;;;;;AAIA,2BAAA,CAAe,UAAC,KAAuB,EAAA;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,QAAQ,EAAC,gCAAgC,YAC1CA,GAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yLAAyL,EAC3L,QAAQ,EAAC,SAAS,EAAA,CAClB,EAAA,CACA,EACJA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAA,UAAA,EAAA,EAAU,EAAE,EAAC,0BAA0B,EAAA,QAAA,EACrCA,cAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,EAAA,CAAG,EAAA,CAC7B,EAAA,CACN,CACR;AAhBD,CAgBC;;;;"}

package/dist/esm/components/icon/icons.stories.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Input } from '../input/index.js';
-import { i as icons } from '../../index-D41W71Hh.js';
+import { i as icons } from '../../index-D7G3EuxU.js';
 import { Button } from '../button/index.js';
 import { c as classNames } from '../../index-DLQEsiym.js';
 import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';

package/dist/esm/components/icon/index.stories.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { IconWrapper } from './IconWrapper/IconWrapper.js';
-import { i as icons } from '../../index-D41W71Hh.js';
+import { i as icons } from '../../index-D7G3EuxU.js';
 import '../../tslib.es6-CVlKGIvp.js';
 import '../../index-DLQEsiym.js';
 import '../../_commonjsHelpers-BFTU3MAI.js';

package/dist/esm/components/table/Table.js

@@ -15,6 +15,7 @@ import { u as useTableNavigation } from '../../useTableNavigation-CrxoXTVd.js';
 import { TableControls } from './components/TableControls/TableControls.js';
 import { i as isBaseCell, T as TableSection } from '../../TableSection-Cm50RX-V.js';
 import { u as useScrollSync } from '../../useScrollSync-C5UXYPIB.js';
+import { Tabs } from '../tabs/Tabs.js';
 import './components/TableCell/BaseCell/BaseCell.js';
 import '../icon/icons/CheckThick.js';
 import '../icon/IconWrapper/IconWrapper.js';
@@ -34,6 +35,8 @@ import './components/IconRenderer/IconRenderer.js';
 import './components/TableCell/CardCell/CardCell.js';
 import '../icon/icons/ChevronRight.js';
 import './components/TableCell/ButtonCell/ButtonCell.js';
+import '../icon/icons/CircleSelected.js';
+import '../icon/icons/CircleUnselected.js';
 import '../modal/bottomModal/index.js';
 import '../modal/genericModal/index.js';
 import '../../index-DuaJiEiT.js';
@@ -51,24 +54,38 @@ var defaultTextOverrides = {
     hideDetails: 'Hide details',
 };
 var Table = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var cellReplacements = _a.cellReplacements, className = _a.className, collapsibleSections = _a.collapsibleSections, _k = _a.hideColumns, hideColumns = _k === void 0 ? [] : _k, hideDetails = _a.hideDetails, _l = _a.hideRows, hideRows = _l === void 0 ? [] : _l, imageComponent = _a.imageComponent, modalContentRenderer = _a.modalContentRenderer, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, scrollOnOpen = _a.scrollOnOpen, _m = _a.scrollTopOffset, scrollTopOffset = _m === void 0 ? 0 : _m, _o = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _o === void 0 ? 0 : _o, tableData = _a.tableData, definedTextOverrides = _a.textOverrides, title = _a.title, externalActiveSection = _a.activeSection, _p = _a.hideTableNavigation, hideTableNavigation = _p === void 0 ? false : _p, _q = _a.hideStickyHeader, hideStickyHeader = _q === void 0 ? false : _q, _r = _a.showSelectedColumn, showSelectedColumn = _r === void 0 ? false : _r;
+    var _b, _c, _d, _e, _f;
+    var cellReplacements = _a.cellReplacements, className = _a.className, collapsibleSections = _a.collapsibleSections, _g = _a.hideColumns, hideColumns = _g === void 0 ? [] : _g, hideDetails = _a.hideDetails, _h = _a.hideRows, hideRows = _h === void 0 ? [] : _h, imageComponent = _a.imageComponent, modalContentRenderer = _a.modalContentRenderer, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, scrollOnOpen = _a.scrollOnOpen, _j = _a.scrollTopOffset, scrollTopOffset = _j === void 0 ? 0 : _j, _k = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _k === void 0 ? 0 : _k, tableData = _a.tableData, definedTextOverrides = _a.textOverrides, title = _a.title, externalActiveSection = _a.activeSection, _l = _a.hideTableNavigation, hideTableNavigation = _l === void 0 ? false : _l, _m = _a.hideStickyHeader, hideStickyHeader = _m === void 0 ? false : _m, _o = _a.showSelectedColumn, showSelectedColumn = _o === void 0 ? false : _o, _p = _a.mobileNavigationMode, mobileNavigationMode = _p === void 0 ? 'arrows' : _p;
     var textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
     var isMobile = useMediaQuery('BELOW_MOBILE');
-    var _s = useState(null), infoModalData = _s[0], setInfoModalData = _s[1];
-    var _t = useState(true), shouldHideDetails = _t[0], setShouldHideDetails = _t[1];
+    var _q = useState(null), infoModalData = _q[0], setInfoModalData = _q[1];
+    var _r = useState(true), shouldHideDetails = _r[0], setShouldHideDetails = _r[1];
     var containerRef = useRef(null);
     var headerRef = useRef(null);
     var stickyHeaderRef = useRef(null);
     var columnsLength = tableData[0].rows[0].length;
     useScrollSync(headerRef, containerRef, !isMobile);
-    var _u = useTableNavigation({
+    var useTabs = isMobile && mobileNavigationMode === 'tabs';
+    var _s = useTableNavigation({
         enabled: isMobile,
         containerRef: containerRef,
         onSelectionChanged: onSelectionChanged,
-    }), activeSection = _u.activeSection, navigateTable = _u.navigateTable, setActiveSection = _u.setActiveSection;
-    var titleCell = __assign({ text: '' }, (((_d = (_c = (_b = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _b === void 0 ? void 0 : _b.rows) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d[0]) || {}));
-    var currentActiveSection = (_g = (_f = (_e = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _e === void 0 ? void 0 : _e.rows) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g[activeSection];
+    }), activeSection = _s.activeSection, navigateTable = _s.navigateTable, setActiveSection = _s.setActiveSection;
+    var headerRow = (_c = (_b = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _b === void 0 ? void 0 : _b.rows) === null || _c === void 0 ? void 0 : _c[0];
+    var titleCell = __assign({ text: '' }, ((headerRow === null || headerRow === void 0 ? void 0 : headerRow[0]) || {}));
+    var currentActiveSection = headerRow === null || headerRow === void 0 ? void 0 : headerRow[activeSection];
+    var mobileTabs = useTabs
+        ? (_d = headerRow === null || headerRow === void 0 ? void 0 : headerRow.slice(1).map(function (cell, index) {
+            var label = '';
+            if (!cell.type)
+                label = String(cell.text || '');
+            else if (cell.type === 'CTA')
+                label = String(cell.title || '');
+            else if (cell.type === 'BUTTON')
+                label = String(cell.buttonCaption || '');
+            return { id: String(index), label: label };
+        })) !== null && _d !== void 0 ? _d : []
+        : [];
     var currentActiveSectionReplacements = ((currentActiveSection === null || currentActiveSection === void 0 ? void 0 : currentActiveSection.cellId) &&
         (cellReplacements === null || cellReplacements === void 0 ? void 0 : cellReplacements[currentActiveSection.cellId])) ||
         {};
@@ -83,7 +100,7 @@ var Table = function (_a) {
             setActiveSection(externalActiveSection - 1);
         }
     }, [externalActiveSection]);
-    return (jsxs("div", { className: classNames(styles.wrapper, 'bg-white'), children: [isMobile ? (jsxs(Fragment, { children: [(titleCell === null || titleCell === void 0 ? void 0 : titleCell.text) && (jsx(TableCell, __assign({}, titleCell, { align: "left", isNavigation: true, isTopLeftCell: true, type: undefined }))), !hideTableNavigation && currentActiveSection && (jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)
+    return (jsxs("div", { className: classNames(styles.wrapper, 'bg-white'), children: [isMobile ? (jsxs(Fragment, { children: [!useTabs && (titleCell === null || titleCell === void 0 ? void 0 : titleCell.text) && (jsx(TableCell, __assign({}, titleCell, { align: "left", isNavigation: true, isTopLeftCell: true, type: undefined }))), !hideTableNavigation && currentActiveSection && (useTabs ? (jsx("div", { className: classNames('bg-white', styles.stickyHeader), style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx(Tabs, { tabs: mobileTabs, activeIndex: activeSection - 1, onTabChange: function (index) { return setActiveSection(index); }, className: "mb16" }) })) : (jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)
                             ? {
                                 openModal: function (body) {
                                     return handleOpenModal({
@@ -92,7 +109,7 @@ var Table = function (_a) {
                                     });
                                 },
                             }
-                            : {}), activeCellProps, { imageComponent: imageComponent, isNavigation: true })) }))] })) : (!hideStickyHeader && (jsx("div", { ref: stickyHeaderRef, "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableSection, { cellReplacements: cellReplacements, className: className, hideColumns: hideColumns, hideRows: hideRows, openModal: handleOpenModal, tableCellRows: [(_j = (_h = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _h === void 0 ? void 0 : _h.rows) === null || _j === void 0 ? void 0 : _j[0]], title: title, imageComponent: imageComponent }) }) }))), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, scrollOnOpen: scrollOnOpen, scrollTopOffset: scrollTopOffset, stickyHeaderRef: stickyHeaderRef, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements, imageComponent: imageComponent, selectedColumn: showSelectedColumn ? activeSection : undefined }) }), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 1 && hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
+                            : {}), activeCellProps, { imageComponent: imageComponent, isNavigation: true })) })))] })) : (!hideStickyHeader && (jsx("div", { ref: stickyHeaderRef, "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableSection, { cellReplacements: cellReplacements, className: className, hideColumns: hideColumns, hideRows: hideRows, openModal: handleOpenModal, tableCellRows: [(_f = (_e = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _e === void 0 ? void 0 : _e.rows) === null || _f === void 0 ? void 0 : _f[0]], title: title, imageComponent: imageComponent }) }) }))), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, scrollOnOpen: scrollOnOpen, scrollTopOffset: scrollTopOffset, stickyHeaderRef: stickyHeaderRef, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements, imageComponent: imageComponent, selectedColumn: showSelectedColumn ? activeSection : undefined, showHeader: useTabs }) }), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 1 && hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
                     buttonWrapper: classNames(styles.cardButton, 'm8 mt32'),
                     title: 'd-flex gap8 ai-center jc-center fw-bold',
                 }, title: jsxs(Fragment, { children: [shouldHideDetails

package/dist/esm/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalData,\n  ModalFunction,\n  TableCellData,\n  TableData,\n} from './types';\n\nexport type { TableData } from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  cellReplacements?: CellReplacements;\n  className?: string;\n  collapsibleSections?: boolean;\n  hideColumns?: number[];\n  hideDetails?: boolean;\n  hideRows?: number[];\n  imageComponent?: (args: any) => JSX.Element;\n  modalContentRenderer?: (content: ReactNode) => ReactNode;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  scrollOnOpen?: boolean;\n  scrollTopOffset?: number;\n  stickyHeaderTopOffset?: number;\n  tableData: TableData;\n  textOverrides?: TextOverrides;\n  title: string;\n  activeSection?: number;\n  hideTableNavigation?: boolean;\n  hideStickyHeader?: boolean;\n  showSelectedColumn?: boolean;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  cellReplacements,\n  className,\n  collapsibleSections,\n  hideColumns = [],\n  hideDetails,\n  hideRows = [],\n  imageComponent,\n  modalContentRenderer,\n  onModalOpen,\n  onSelectionChanged,\n  scrollOnOpen,\n  scrollTopOffset = 0,\n  stickyHeaderTopOffset = 0,\n  tableData,\n  textOverrides: definedTextOverrides,\n  title,\n  activeSection: externalActiveSection,\n  hideTableNavigation = false,\n  hideStickyHeader = false,\n  showSelectedColumn = false,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = tableData[0].rows[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable, setActiveSection } = useTableNavigation(\n    {\n      enabled: isMobile,\n      containerRef,\n      onSelectionChanged,\n    }\n  );\n\n  const titleCell = {\n    text: '',\n    ...(tableData?.[0]?.rows?.[0]?.[0] || {}),\n  };\n  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n  const currentActiveSectionReplacements =\n    (currentActiveSection?.cellId &&\n      cellReplacements?.[currentActiveSection.cellId]) ||\n    {};\n\n  const activeCellProps = {\n    ...currentActiveSection,\n    ...currentActiveSectionReplacements,\n  } as TableCellData;\n\n  const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  }, []);\n\n  useEffect(() => {\n    if (externalActiveSection && externalActiveSection !== activeSection) {\n      setActiveSection(externalActiveSection - 1);\n    }\n  }, [externalActiveSection]);\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <>\n          {titleCell?.text && (\n            <TableCell\n              {...titleCell}\n              align=\"left\"\n              isNavigation\n              isTopLeftCell\n              type={undefined}\n            />\n          )}\n\n          {!hideTableNavigation && currentActiveSection && (\n            <TableControls\n              activeSection={activeSection}\n              columnsLength={columnsLength}\n              navigateTable={navigateTable}\n              stickyHeaderTopOffset={stickyHeaderTopOffset}\n            >\n              <TableCell\n                {...(isBaseCell(currentActiveSection)\n                  ? {\n                      openModal: (body: ReactNode) =>\n                        handleOpenModal({\n                          body,\n                          title: currentActiveSection?.text,\n                        }),\n                    }\n                  : {})}\n                {...activeCellProps}\n                imageComponent={imageComponent}\n                isNavigation\n              />\n            </TableControls>\n          )}\n        </>\n      ) : (\n        !hideStickyHeader && (\n          <div\n            ref={stickyHeaderRef}\n            aria-hidden\n            className={styles.stickyHeader}\n            style={{ top: `${stickyHeaderTopOffset}px` }}\n          >\n            <div className={styles.container} ref={headerRef}>\n              <TableSection\n                cellReplacements={cellReplacements}\n                className={className}\n                hideColumns={hideColumns}\n                hideRows={hideRows}\n                openModal={handleOpenModal}\n                tableCellRows={[tableData?.[0]?.rows?.[0]]}\n                title={title}\n                imageComponent={imageComponent}\n              />\n            </div>\n          </div>\n        )\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableContents\n          tableData={tableData}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          scrollOnOpen={scrollOnOpen}\n          scrollTopOffset={scrollTopOffset}\n          stickyHeaderRef={stickyHeaderRef}\n          hideColumns={hideColumns}\n          hideDetails={hideDetails}\n          hideRows={hideRows}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n          cellReplacements={cellReplacements}\n          imageComponent={imageComponent}\n          selectedColumn={showSelectedColumn ? activeSection : undefined}\n        />\n      </div>\n\n      {tableData?.length > 1 && hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: classNames(styles.cardButton, 'm8 mt32'),\n            title: 'd-flex gap8 ai-center jc-center fw-bold',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={20} />\n              ) : (\n                <ChevronUpIcon size={20} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"xsmall\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className={classNames(styles.modalContent, 'pt8 p24 wmn6')}>\n          {modalContentRenderer\n            ? modalContentRenderer(infoModalData?.body)\n            : infoModalData?.body}\n        </div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalData,\n  ModalFunction,\n  TableCellData,\n  TableData,\n} from './types';\nimport { Tabs, TabItem } from '../tabs/Tabs';\n\nexport type { TableData } from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  cellReplacements?: CellReplacements;\n  className?: string;\n  collapsibleSections?: boolean;\n  hideColumns?: number[];\n  hideDetails?: boolean;\n  hideRows?: number[];\n  imageComponent?: (args: any) => JSX.Element;\n  modalContentRenderer?: (content: ReactNode) => ReactNode;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  scrollOnOpen?: boolean;\n  scrollTopOffset?: number;\n  stickyHeaderTopOffset?: number;\n  tableData: TableData;\n  textOverrides?: TextOverrides;\n  title: string;\n  activeSection?: number;\n  hideTableNavigation?: boolean;\n  hideStickyHeader?: boolean;\n  showSelectedColumn?: boolean;\n  mobileNavigationMode?: 'arrows' | 'tabs';\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  cellReplacements,\n  className,\n  collapsibleSections,\n  hideColumns = [],\n  hideDetails,\n  hideRows = [],\n  imageComponent,\n  modalContentRenderer,\n  onModalOpen,\n  onSelectionChanged,\n  scrollOnOpen,\n  scrollTopOffset = 0,\n  stickyHeaderTopOffset = 0,\n  tableData,\n  textOverrides: definedTextOverrides,\n  title,\n  activeSection: externalActiveSection,\n  hideTableNavigation = false,\n  hideStickyHeader = false,\n  showSelectedColumn = false,\n  mobileNavigationMode = 'arrows',\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = tableData[0].rows[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const useTabs = isMobile && mobileNavigationMode === 'tabs';\n\n  const { activeSection, navigateTable, setActiveSection } = useTableNavigation(\n    {\n      enabled: isMobile,\n      containerRef,\n      onSelectionChanged,\n    }\n  );\n\n  const headerRow = tableData?.[0]?.rows?.[0];\n  const titleCell = {\n    text: '',\n    ...(headerRow?.[0] || {}),\n  };\n  const currentActiveSection = headerRow?.[activeSection];\n\n  const mobileTabs: TabItem[] = useTabs\n    ? headerRow\n        ?.slice(1)\n        .map((cell, index) => {\n          let label = '';\n          if (!cell.type) label = String(cell.text || '');\n          else if (cell.type === 'CTA') label = String(cell.title || '');\n          else if (cell.type === 'BUTTON') label = String(cell.buttonCaption || '');\n          return { id: String(index), label };\n        }) ?? []\n    : [];\n\n  const currentActiveSectionReplacements =\n    (currentActiveSection?.cellId &&\n      cellReplacements?.[currentActiveSection.cellId]) ||\n    {};\n\n  const activeCellProps = {\n    ...currentActiveSection,\n    ...currentActiveSectionReplacements,\n  } as TableCellData;\n\n  const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  }, []);\n\n  useEffect(() => {\n    if (externalActiveSection && externalActiveSection !== activeSection) {\n      setActiveSection(externalActiveSection - 1);\n    }\n  }, [externalActiveSection]);\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <>\n          {!useTabs && titleCell?.text && (\n            <TableCell\n              {...titleCell}\n              align=\"left\"\n              isNavigation\n              isTopLeftCell\n              type={undefined}\n            />\n          )}\n\n          {!hideTableNavigation && currentActiveSection && (\n            useTabs ? (\n              <div\n                className={classNames(\n                  'bg-white',\n                  styles.stickyHeader\n                )}\n                style={{ top: `${stickyHeaderTopOffset}px` }}\n              >\n                <Tabs\n                  tabs={mobileTabs}\n                  activeIndex={activeSection - 1}\n                  onTabChange={(index) => setActiveSection(index)}\n                  className=\"mb16\"\n                />\n              </div>\n            ) : (\n              <TableControls\n                activeSection={activeSection}\n                columnsLength={columnsLength}\n                navigateTable={navigateTable}\n                stickyHeaderTopOffset={stickyHeaderTopOffset}\n              >\n                <TableCell\n                  {...(isBaseCell(currentActiveSection)\n                    ? {\n                        openModal: (body: ReactNode) =>\n                          handleOpenModal({\n                            body,\n                            title: currentActiveSection?.text,\n                          }),\n                      }\n                    : {})}\n                  {...activeCellProps}\n                  imageComponent={imageComponent}\n                  isNavigation\n                />\n              </TableControls>\n            )\n          )}\n        </>\n      ) : (\n        !hideStickyHeader && (\n          <div\n            ref={stickyHeaderRef}\n            aria-hidden\n            className={styles.stickyHeader}\n            style={{ top: `${stickyHeaderTopOffset}px` }}\n          >\n            <div className={styles.container} ref={headerRef}>\n              <TableSection\n                cellReplacements={cellReplacements}\n                className={className}\n                hideColumns={hideColumns}\n                hideRows={hideRows}\n                openModal={handleOpenModal}\n                tableCellRows={[tableData?.[0]?.rows?.[0]]}\n                title={title}\n                imageComponent={imageComponent}\n              />\n            </div>\n          </div>\n        )\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableContents\n          tableData={tableData}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          scrollOnOpen={scrollOnOpen}\n          scrollTopOffset={scrollTopOffset}\n          stickyHeaderRef={stickyHeaderRef}\n          hideColumns={hideColumns}\n          hideDetails={hideDetails}\n          hideRows={hideRows}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n          cellReplacements={cellReplacements}\n          imageComponent={imageComponent}\n          selectedColumn={showSelectedColumn ? activeSection : undefined}\n          showHeader={useTabs}\n        />\n      </div>\n\n      {tableData?.length > 1 && hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: classNames(styles.cardButton, 'm8 mt32'),\n            title: 'd-flex gap8 ai-center jc-center fw-bold',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={20} />\n              ) : (\n                <ChevronUpIcon size={20} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"xsmall\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className={classNames(styles.modalContent, 'pt8 p24 wmn6')}>\n          {modalContentRenderer\n            ? modalContentRenderer(infoModalData?.body)\n            : infoModalData?.body}\n        </div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAM,oBAAoB,GAAG;AAC3B,IAAA,WAAW,EAAE,cAAc;AAC3B,IAAA,WAAW,EAAE,cAAc;CAC5B;AAED,IAAM,KAAK,GAAG,UAAC,EAsBF,EAAA;;QArBX,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,EAAA,GAAA,EAAA,CAAA,WAAgB,EAAhB,WAAW,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,KAAA,EAChB,WAAW,iBAAA,EACX,EAAA,GAAA,EAAA,CAAA,QAAa,EAAb,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACb,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,GAAA,EAAA,EACnB,EAAA,GAAA,EAAA,CAAA,qBAAyB,EAAzB,qBAAqB,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,KAAA,EACzB,SAAS,eAAA,EACM,oBAAoB,mBAAA,EACnC,KAAK,WAAA,EACU,qBAAqB,mBAAA,EACpC,EAAA,GAAA,EAAA,CAAA,mBAA2B,EAA3B,mBAAmB,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EAC3B,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,GAAA,EAAA,EACxB,EAAA,GAAA,EAAA,CAAA,kBAA0B,EAA1B,kBAAkB,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,KAAA,EAC1B,EAAA,GAAA,EAAA,CAAA,oBAA+B,EAA/B,oBAAoB,GAAA,EAAA,KAAA,MAAA,GAAG,QAAQ,GAAA,EAAA;AAE/B,IAAA,IAAM,aAAa,GAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,oBAAoB,CAAA,EAAK,oBAAoB,CAAE;AAC1E,IAAA,IAAM,QAAQ,GAAG,aAAa,CAAC,cAAc,CAAC;IACxC,IAAA,EAAA,GAAoC,QAAQ,CAAmB,IAAI,CAAC,EAAnE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAAoC;IACpE,IAAA,EAAA,GAA4C,QAAQ,CAAC,IAAI,CAAC,EAAzD,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,oBAAoB,GAAA,EAAA,CAAA,CAAA,CAAkB;AAChE,IAAA,IAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC;AACxD,IAAA,IAAM,SAAS,GAAG,MAAM,CAAwB,IAAI,CAAC;AACrD,IAAA,IAAM,eAAe,GAAG,MAAM,CAAwB,IAAI,CAAC;AAC3D,IAAA,IAAM,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM;IAEjD,aAAa,CAAC,SAAS,EAAE,YAAY,EAAE,CAAC,QAAQ,CAAC;AAEjD,IAAA,IAAM,OAAO,GAAG,QAAQ,IAAI,oBAAoB,KAAK,MAAM;IAErD,IAAA,EAAA,GAAqD,kBAAkB,CAC3E;AACE,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,kBAAkB,EAAA,kBAAA;KACnB,CACF,EANO,aAAa,GAAA,EAAA,CAAA,aAAA,EAAE,aAAa,GAAA,EAAA,CAAA,aAAA,EAAE,gBAAgB,GAAA,EAAA,CAAA,gBAMrD;AAED,IAAA,IAAM,SAAS,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAG,CAAC,CAAC;IAC3C,IAAM,SAAS,cACb,IAAI,EAAE,EAAE,EAAA,GACJ,CAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAG,CAAC,CAAC,KAAI,EAAE,EACzB;IACD,IAAM,oBAAoB,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAG,aAAa,CAAC;IAEvD,IAAM,UAAU,GAAc;AAC5B,UAAE,CAAA,EAAA,GAAA,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CACL,KAAK,CAAC,CAAC,CAAA,CACR,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,EAAA;YACf,IAAI,KAAK,GAAG,EAAE;YACd,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;AAC1C,iBAAA,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK;gBAAE,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;AACzD,iBAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAAE,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC;YACzE,OAAO,EAAE,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,EAAA,KAAA,EAAE;QACrC,CAAC,CAAC,mCAAI;UACR,EAAE;IAEN,IAAM,gCAAgC,GACpC,CAAC,CAAA,oBAAoB,aAApB,oBAAoB,KAAA,MAAA,GAAA,MAAA,GAApB,oBAAoB,CAAE,MAAM;SAC3B,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAG,oBAAoB,CAAC,MAAM,CAAC,CAAA;AACjD,QAAA,EAAE;AAEJ,IAAA,IAAM,eAAe,GAAG,QAAA,CAAA,QAAA,CAAA,EAAA,EACnB,oBAAoB,CAAA,EACpB,gCAAgC,CACnB;AAElB,IAAA,IAAM,eAAe,GAAkB,WAAW,CAAC,UAAC,EAAe,EAAA;YAAb,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA;AAC/D,QAAA,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAG,EAAE,IAAI,EAAA,IAAA,EAAE,KAAK,EAAA,KAAA,EAAE,CAAC;QAC9B,gBAAgB,CAAC,EAAE,IAAI,EAAA,IAAA,EAAE,KAAK,EAAA,KAAA,EAAE,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAI,qBAAqB,IAAI,qBAAqB,KAAK,aAAa,EAAE;AACpE,YAAA,gBAAgB,CAAC,qBAAqB,GAAG,CAAC,CAAC;QAC7C;AACF,IAAA,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC;AAE3B,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,EAAA,QAAA,EAAA,CACnD,QAAQ,IACPA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,CAAC,OAAO,KAAI,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,CAAA,KAC1BC,IAAC,SAAS,EAAA,QAAA,CAAA,EAAA,EACJ,SAAS,EAAA,EACb,KAAK,EAAC,MAAM,EACZ,YAAY,EAAA,IAAA,EACZ,aAAa,EAAA,IAAA,EACb,IAAI,EAAE,SAAS,EAAA,CAAA,CACf,CACH,EAEA,CAAC,mBAAmB,IAAI,oBAAoB,KAC3C,OAAO,IACLA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,UAAU,EACV,MAAM,CAAC,YAAY,CACpB,EACD,KAAK,EAAE,EAAE,GAAG,EAAE,UAAG,qBAAqB,EAAA,IAAA,CAAI,EAAE,EAAA,QAAA,EAE5CA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAE,UAAU,EAChB,WAAW,EAAE,aAAa,GAAG,CAAC,EAC9B,WAAW,EAAE,UAAC,KAAK,EAAA,EAAK,OAAA,gBAAgB,CAAC,KAAK,CAAC,EAAvB,CAAuB,EAC/C,SAAS,EAAC,MAAM,EAAA,CAChB,EAAA,CACE,KAENA,GAAA,CAAC,aAAa,EAAA,EACZ,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,qBAAqB,EAAE,qBAAqB,EAAA,QAAA,EAE5CA,GAAA,CAAC,SAAS,EAAA,QAAA,CAAA,EAAA,GACH,UAAU,CAAC,oBAAoB;AAClC,8BAAE;gCACE,SAAS,EAAE,UAAC,IAAe,EAAA;AACzB,oCAAA,OAAA,eAAe,CAAC;AACd,wCAAA,IAAI,EAAA,IAAA;AACJ,wCAAA,KAAK,EAAE,oBAAoB,KAAA,IAAA,IAApB,oBAAoB,KAAA,MAAA,GAAA,MAAA,GAApB,oBAAoB,CAAE,IAAI;qCAClC,CAAC;gCAHF,CAGE;AACL;8BACD,EAAE,GACF,eAAe,IACnB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAA,IAAA,EAAA,CAAA,CACZ,GACY,CACjB,CACF,CAAA,EAAA,CACA,KAEH,CAAC,gBAAgB,KACfA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,eAAe,EAAA,aAAA,EAAA,IAAA,EAEpB,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,EAAE,GAAG,EAAE,UAAG,qBAAqB,EAAA,IAAA,CAAI,EAAE,EAAA,QAAA,EAE5CA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,SAAS,YAC9CA,GAAA,CAAC,YAAY,EAAA,EACX,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAa,EAAE,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAG,CAAC,CAAC,CAAC,EAC1C,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAAA,CAC9B,EAAA,CACE,EAAA,CACF,CACP,CACF,EAEDA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,EAAA,QAAA,EACpEA,IAAC,aAAa,EAAA,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,mBAAmB,EACxC,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,eAAe,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,kBAAkB,GAAG,aAAa,GAAG,SAAS,EAC9D,UAAU,EAAE,OAAO,EAAA,CACnB,EAAA,CACE,EAEL,CAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,MAAM,IAAG,CAAC,IAAI,WAAW,KACnCA,GAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EACS,mBAAmB,EAC/B,UAAU,EAAE;oBACV,aAAa,EAAE,UAAU,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC;AACvD,oBAAA,KAAK,EAAE,yCAAyC;iBACjD,EACD,KAAK,EACHF,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG;8BACG,aAAa,CAAC;8BACd,aAAa,CAAC,WAAW,EAC5B,iBAAiB,IAChBC,GAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,KAE7BA,GAAA,CAAC,aAAa,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,CAC5B,CAAA,EAAA,CACA,EAEL,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,KAAK,EACjB,YAAY,EAAC,OAAO,EACpB,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,YAAA,EAAM,OAAA,oBAAoB,CAAC,UAAC,OAAO,EAAA,EAAK,OAAA,CAAC,OAAO,CAAA,CAAR,CAAQ,CAAC,CAAA,CAA3C,CAA2C,EAAA,CAC1D,CACH,EAEDA,GAAA,CAAC,oBAAoB,EAAA,EACnB,MAAM,EAAE,CAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI,IAAG,IAAI,GAAG,KAAK,EAC1C,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAC3B,OAAO,EAAE,YAAA,EAAM,OAAA,gBAAgB,CAAC,IAAI,CAAC,CAAA,CAAtB,CAAsB,EAAA,QAAA,EAErCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,EAAA,QAAA,EAC5D;0BACG,oBAAoB,CAAC,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI;AAC1C,0BAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI,EAAA,CACnB,EAAA,CACe,CAAA,EAAA,CACnB;AAEV;;;;"}

package/dist/esm/components/table/Table.stories.js

@@ -28,6 +28,8 @@ import './components/TableCell/CardCell/CardCell.js';
 import '../cards/card/index.js';
 import '../icon/icons/ChevronRight.js';
 import './components/TableCell/ButtonCell/ButtonCell.js';
+import '../icon/icons/CircleSelected.js';
+import '../icon/icons/CircleUnselected.js';
 import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../modal/bottomOrRegularModal/index.js';
@@ -44,6 +46,7 @@ import '../../useTableNavigation-CrxoXTVd.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
 import '../../useScrollSync-C5UXYPIB.js';
+import '../tabs/Tabs.js';
 import '../../index-CNcEE5dn.js';
 
 var initialData = [
@@ -682,6 +685,84 @@ var TwoPlanQuoteWebsite = {
     render: function () { return (jsx("div", { style: { maxWidth: 900 }, children: jsx(Table, { tableData: twoPlanWebsiteData, title: "Two plan quote website", collapsibleSections: true }) })); },
     name: 'Two Plan - Website',
 };
+var getTwoPlanQuoteData = function (selectedPlan, setSelectedPlan) { return [
+    {
+        rows: [
+            [
+                { text: 'Select a plan' },
+                {
+                    type: 'BUTTON',
+                    buttonCaption: 'Basic',
+                    price: '€99/mo',
+                    isSelected: selectedPlan === 1,
+                    onClick: function () { return setSelectedPlan(1); },
+                },
+                {
+                    type: 'BUTTON',
+                    buttonCaption: 'Advanced',
+                    price: '€134/mo',
+                    isSelected: selectedPlan === 2,
+                    onClick: function () { return setSelectedPlan(2); },
+                },
+            ],
+            [
+                { text: 'Your contribution' },
+                { text: '€99', description: 'per month', fontVariant: 'PRICE' },
+                { text: '€134', description: 'per month', fontVariant: 'PRICE' },
+            ],
+            [
+                { text: 'Outpatient treatments', modalContent: 'Outpatient info' },
+                { checkmarkValue: true },
+                { checkmarkValue: true },
+            ],
+            [
+                { text: 'Inpatient treatments', modalContent: 'Inpatient info' },
+                { checkmarkValue: false },
+                { checkmarkValue: true },
+            ],
+            [
+                { text: 'Dental care', modalContent: 'Dental info' },
+                { text: '50%' },
+                { text: '80%' },
+            ],
+        ],
+    },
+    {
+        section: {
+            title: 'Coverage details',
+        },
+        rows: [
+            [
+                { text: 'Annual limit' },
+                { text: 'Up to €10,000' },
+                { text: 'Unlimited' },
+            ],
+            [
+                { text: 'Deductible' },
+                { text: '€500' },
+                { text: '€250' },
+            ],
+            [
+                { text: 'Preventive care' },
+                { checkmarkValue: true },
+                { checkmarkValue: true },
+            ],
+            [
+                { text: 'Alternative medicine' },
+                { checkmarkValue: false },
+                { checkmarkValue: true },
+            ],
+        ],
+    },
+]; };
+var TwoPlanQuoteStory = function () {
+    var _a = useState(1), selectedPlan = _a[0], setSelectedPlan = _a[1];
+    return (jsx("div", { style: { maxWidth: 900 }, children: jsx(Table, { tableData: getTwoPlanQuoteData(selectedPlan, setSelectedPlan), title: "Two plan quote", collapsibleSections: true, showSelectedColumn: true, activeSection: selectedPlan, onSelectionChanged: setSelectedPlan }) }));
+};
+var TwoPlanQuote = {
+    render: function () { return jsx(TwoPlanQuoteStory, {}); },
+    name: 'Two Plan Quote',
+};
 var threePlanWebsiteData = [
     {
         rows: [
@@ -792,9 +873,13 @@ var ThreePlanQuoteWebsite = {
     render: function () { return (jsx("div", { style: { maxWidth: 900 }, children: jsx(Table, { tableData: threePlanWebsiteData, title: "Three plan quote website", collapsibleSections: true }) })); },
     name: 'Three Plan - Website',
 };
+var TabsNavigationMobile = {
+    render: function () { return (jsxs("div", { style: { maxWidth: 900 }, children: [jsx("p", { className: "p-p tc-neutral-500 mb16", children: "Resize the browser to a mobile width to see tabs instead of left/right arrow buttons." }), jsx(Table, { tableData: threePlanWebsiteData, title: "Tabs navigation (mobile)", collapsibleSections: true, mobileNavigationMode: "tabs" })] })); },
+    name: 'Tabs Navigation (Mobile)',
+};
 var TableDataType = function () {
     return (jsx("pre", { children: "\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    text?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      " }));
 };
 
-export { SinglePlanQuoteTable, SinglePlanQuoteWebsite, TableDataType, TableStory, ThreePlanQuoteWebsite, TwoPlanQuoteWebsite, story as default };
+export { SinglePlanQuoteTable, SinglePlanQuoteWebsite, TableDataType, TableStory, TabsNavigationMobile, ThreePlanQuoteWebsite, TwoPlanQuote, TwoPlanQuoteWebsite, story as default };
 //# sourceMappingURL=Table.stories.js.map