@popsure/dirty-swan 0.66.12 → 0.66.14

package/dist/cjs/index.js

@@ -22624,8 +22624,8 @@ var Accordion = function (_a) {
         }) }));
 };
 
-var css_248z$a = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n}\n.TableCell-module_fixedCell__cL3-m:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 1px;\n  background-color: #f7f7fd;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_fixedCell__cL3-m {\n    padding-left: 16px;\n  }\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
-var styles$a = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","fixedCell":"TableCell-module_fixedCell__cL3-m","fixedCard":"TableCell-module_fixedCard__2LO8s"};
+var css_248z$a = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n  padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n  padding-left: 0;\n}\n\n.TableCell-module_selectedColumnTop__1GcJz {\n  border-radius: 16px 16px 0 0;\n}\n\n.TableCell-module_selectedColumnBottom__qiMke {\n  border-radius: 0 0 16px 16px;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
+var styles$a = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","fixedCell":"TableCell-module_fixedCell__cL3-m","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
 styleInject(css_248z$a);
 
 var css_248z$9 = "@media (max-width: 34rem) {\n  .BaseCell-module_maxWidth__14Cly {\n    max-width: calc(100% - 64px);\n  }\n}\n\n.BaseCell-module_icon__1775U {\n  margin: 2px;\n}\n\n.BaseCell-module_description__3_kfe {\n  word-break: break-word;\n}";
@@ -22670,7 +22670,7 @@ var BaseCell = function (_a) {
             'jc-center': align === 'center',
         }), children: jsxRuntime.jsxs("div", { className: classNames('d-flex fd-column', alignClassName, (_b = {},
                 _b[styles$9.maxWidth] = modalContent && align === 'center',
-                _b)), children: [jsxRuntime.jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsxRuntime.jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsxRuntime.jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'neutral-900' : 'neutral-400', className: styles$9.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsxRuntime.jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsxRuntime.jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "neutral-900" })) : (jsxRuntime.jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "neutral-400" })) })), jsxRuntime.jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsxRuntime.jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsxRuntime.jsx("div", { className: "p-h1 p--serif tc-neutral-900", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'TITLE' && (jsxRuntime.jsx("h2", { "aria-hidden": true, className: "tc-grey-800 p-h2 p--serif", children: text })), modalContent && openModal && (jsxRuntime.jsx("span", { className: "ml8", children: jsxRuntime.jsx(TableInfoButton, { onClick: function () {
+                _b)), children: [jsxRuntime.jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsxRuntime.jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsxRuntime.jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'neutral-900' : 'neutral-400', className: styles$9.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsxRuntime.jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsxRuntime.jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "neutral-900" })) : (jsxRuntime.jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "neutral-500" })) })), jsxRuntime.jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsxRuntime.jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsxRuntime.jsx("div", { className: "p-h1 p--serif tc-neutral-900", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'TITLE' && (jsxRuntime.jsx("h2", { "aria-hidden": true, className: "tc-grey-800 p-h2 p--serif", children: text })), modalContent && openModal && (jsxRuntime.jsx("span", { className: "ml8", children: jsxRuntime.jsx(TableInfoButton, { onClick: function () {
                                             return openModal({
                                                 title: modalTitle,
                                                 body: modalContent,
@@ -22694,7 +22694,7 @@ var CTACell = function (_a) {
     var _b;
     var title = _a.title, price = _a.price, icon = _a.icon, grey = _a.grey, narrow = _a.narrow, href = _a.href, buttonCaption = _a.buttonCaption, imageComponent = _a.imageComponent, className = _a.className, dataCy = _a.dataCy, dataTestId = _a.dataTestId, onClick = _a.onClick;
     var renderedIcon = (jsxRuntime.jsx(IconRenderer, { icon: icon, imageComponent: imageComponent }));
-    return (jsxRuntime.jsxs("div", { className: classNames(className, "ta-center"), "data-cy": dataCy, "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: "d-flex jc-center ai-center gap8", children: [renderedIcon, jsxRuntime.jsxs("p", { className: "p-h3", children: [title, price && jsxRuntime.jsxs("span", { className: "tc-purple-600", children: [" ", price] })] })] }), jsxRuntime.jsx(Button, __assign({}, onClick ? { onClick: onClick } : {
+    return (jsxRuntime.jsxs("div", { className: classNames(className, "ta-left"), "data-cy": dataCy, "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: "d-flex ai-center gap8", children: [renderedIcon, jsxRuntime.jsxs("p", { className: "p-h3", children: [title, price && jsxRuntime.jsxs("span", { className: "tc-purple-600", children: [" ", price] })] })] }), jsxRuntime.jsx(Button, __assign({}, onClick ? { onClick: onClick } : {
                 as: 'a',
                 href: href,
                 target: '_blank',
@@ -22720,7 +22720,7 @@ styleInject(css_248z$6);
 var ButtonCell = function (_a) {
     var _b;
     var isSelected = _a.isSelected, onClick = _a.onClick, buttonCaption = _a.buttonCaption, price = _a.price, disabled = _a.disabled, className = _a.className, dataCy = _a.dataCy, dataTestId = _a.dataTestId;
-    return (jsxRuntime.jsx("div", { className: classNames("w100 d-flex fd-column ai-center jc-center gap8", className), "data-cy": dataCy, "data-testid": dataTestId, children: jsxRuntime.jsxs(Button, { className: classNames('w100 wmx5 d-flex fd-column', styles$6.buttonCell, (_b = {},
+    return (jsxRuntime.jsx("div", { className: classNames("w100 d-flex fd-column ai-start jc-center gap8", className), "data-cy": dataCy, "data-testid": dataTestId, children: jsxRuntime.jsxs(Button, { className: classNames('w100 wmx5 d-flex fd-column', styles$6.buttonCell, (_b = {},
                 _b[styles$6.selected] = isSelected,
                 _b[styles$6.withoutPrice] = !price,
                 _b[styles$6.withPrice] = !!price,
@@ -22730,7 +22730,7 @@ var ButtonCell = function (_a) {
 var TableCell = React.memo(function (_a) {
     var _b;
     var _c;
-    var _d = _a.isFirstCellInRow, isFirstCellInRow = _d === void 0 ? false : _d, _e = _a.isHeader, isHeader = _e === void 0 ? false : _e, _f = _a.isNavigation, isNavigation = _f === void 0 ? false : _f, _g = _a.isTopLeftCell, isTopLeftCell = _g === void 0 ? false : _g, _h = _a.colSpan, colSpan = _h === void 0 ? 0 : _h, isBelowDesktop = _a.isBelowDesktop, cellProps = __rest$1(_a, ["isFirstCellInRow", "isHeader", "isNavigation", "isTopLeftCell", "colSpan", "isBelowDesktop"]);
+    var _d = _a.isFirstCellInRow, isFirstCellInRow = _d === void 0 ? false : _d, _e = _a.isHeader, isHeader = _e === void 0 ? false : _e, _f = _a.isNavigation, isNavigation = _f === void 0 ? false : _f, _g = _a.isSelectedColumn, isSelectedColumn = _g === void 0 ? false : _g, selectedColumnPosition = _a.selectedColumnPosition, _h = _a.isTopLeftCell, isTopLeftCell = _h === void 0 ? false : _h, _j = _a.colSpan, colSpan = _j === void 0 ? 0 : _j, isBelowDesktop = _a.isBelowDesktop, cellProps = __rest$1(_a, ["isFirstCellInRow", "isHeader", "isNavigation", "isSelectedColumn", "selectedColumnPosition", "isTopLeftCell", "colSpan", "isBelowDesktop"]);
     // prettier-ignore
     var Tag = isNavigation
         ? 'div'
@@ -22742,23 +22742,25 @@ var TableCell = React.memo(function (_a) {
     var scope = {
         scope: thScope,
     };
-    return (jsxRuntime.jsxs(Tag, __assign({}, scope, { className: classNames('bg-white py24 px8', styles$a.th, (_b = {
+    return (jsxRuntime.jsxs(Tag, __assign({}, scope, { className: classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles$a.th, (_b = {
                 'ta-left': isFirstCellInRow
             },
             _b[styles$a.thNavigation] = isNavigation,
             _b[styles$a.fixedCell] = isFirstCellInRow && colSpan < 1,
             _b[styles$a.fixedCard] = cellProps.type === 'CARD',
+            _b[styles$a.selectedColumnTop] = selectedColumnPosition === 'top',
+            _b[styles$a.selectedColumnBottom] = selectedColumnPosition === 'bottom',
             _b)), colSpan: isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan, children: [!cellProps.type && (jsxRuntime.jsx(BaseCell, __assign({}, cellProps, { fontVariant: isTopLeftCell
                     ? 'TITLE'
                     : (_c = cellProps.fontVariant) !== null && _c !== void 0 ? _c : 'NORMAL' }))), cellProps.type === 'CTA' && jsxRuntime.jsx(CTACell, __assign({}, cellProps)), cellProps.type === 'BUTTON' && jsxRuntime.jsx(ButtonCell, __assign({}, cellProps)), cellProps.type === 'CARD' && jsxRuntime.jsx(CardCell, __assign({}, cellProps))] })));
 });
 
-var css_248z$5 = ".Table-module_wrapper__2MMNq {\n  position: relative;\n}\n\n.Table-module_container__3VFLP {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n.Table-module_container__3VFLP::-webkit-scrollbar {\n  display: none;\n}\n@media (min-width: 34rem) {\n  .Table-module_container__3VFLP {\n    scroll-snap-type: unset;\n  }\n}\n\n.Table-module_cardButton__3aMuL div {\n  background-color: #FAF8F5;\n}\n.Table-module_cardButton__3aMuL:hover div {\n  border-color: transparent !important;\n  outline-color: transparent !important;\n  box-shadow: none !important;\n  background-color: #FCF7EF !important;\n}\n.Table-module_cardButton__3aMuL:focus-visible div {\n  background-color: #FCF7EF !important;\n}\n\n.Table-module_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n}\n\n@media (max-width: 34rem) {\n  .Table-module_modalContent__1PNgv {\n    min-width: initial;\n  }\n}";
+var css_248z$5 = ".Table-module_wrapper__2MMNq {\n  position: relative;\n  border: 1px solid #f2f2f8;\n  border-radius: 12px;\n  padding: 24px 24px 0;\n}\n\n.Table-module_container__3VFLP {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n.Table-module_container__3VFLP::-webkit-scrollbar {\n  display: none;\n}\n@media (min-width: 34rem) {\n  .Table-module_container__3VFLP {\n    scroll-snap-type: unset;\n  }\n}\n\n.Table-module_cardButton__3aMuL div {\n  background-color: #FAF8F5;\n}\n.Table-module_cardButton__3aMuL:hover div {\n  border-color: transparent !important;\n  outline-color: transparent !important;\n  box-shadow: none !important;\n  background-color: #FCF7EF !important;\n}\n.Table-module_cardButton__3aMuL:focus-visible div {\n  background-color: #FCF7EF !important;\n}\n\n.Table-module_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n}\n\n@media (max-width: 34rem) {\n  .Table-module_modalContent__1PNgv {\n    min-width: initial;\n  }\n}";
 var styles$5 = {"wrapper":"Table-module_wrapper__2MMNq","container":"Table-module_container__3VFLP","cardButton":"Table-module_cardButton__3aMuL","stickyHeader":"Table-module_stickyHeader__2uEpP","modalContent":"Table-module_modalContent__1PNgv"};
 styleInject(css_248z$5);
 
-var css_248z$4 = ".TableSection-module_table__sNbDq {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n@media (min-width: 34rem) {\n  .TableSection-module_table__sNbDq {\n    min-width: 845px;\n  }\n}\n\n.TableSection-module_tr__UbkbE {\n  min-height: 72px;\n}";
-var styles$4 = {"table":"TableSection-module_table__sNbDq","tr":"TableSection-module_tr__UbkbE"};
+var css_248z$4 = ".TableSection-module_table__sNbDq {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n@media (min-width: 34rem) {\n  .TableSection-module_tableMultiplePlans__gaWQS {\n    min-width: 845px;\n  }\n}\n\n.TableSection-module_tr__UbkbE {\n  min-height: 72px;\n  border-bottom: 1px solid #e7e7ed;\n}\n.TableSection-module_tr__UbkbE:last-child {\n  border-bottom: none;\n}";
+var styles$4 = {"table":"TableSection-module_table__sNbDq","tableMultiplePlans":"TableSection-module_tableMultiplePlans__gaWQS","tr":"TableSection-module_tr__UbkbE"};
 styleInject(css_248z$4);
 
 var isBaseCell = function (tableCellData) {
@@ -22766,9 +22768,15 @@ var isBaseCell = function (tableCellData) {
 };
 
 var TableSection = function (_a) {
-    var className = _a.className, tableCellRows = _a.tableCellRows, _b = _a.hideColumns, hideColumns = _b === void 0 ? [] : _b, _c = _a.hideRows, hideRows = _c === void 0 ? [] : _c, hideHeader = _a.hideHeader, openModal = _a.openModal, title = _a.title, width = _a.width, cellReplacements = _a.cellReplacements, imageComponent = _a.imageComponent;
+    var _b;
+    var _c;
+    var className = _a.className, tableCellRows = _a.tableCellRows, _d = _a.hideColumns, hideColumns = _d === void 0 ? [] : _d, _e = _a.hideRows, hideRows = _e === void 0 ? [] : _e, hideHeader = _a.hideHeader, openModal = _a.openModal, title = _a.title, width = _a.width, cellReplacements = _a.cellReplacements, imageComponent = _a.imageComponent, selectedColumn = _a.selectedColumn;
     var headerRow = tableCellRows === null || tableCellRows === void 0 ? void 0 : tableCellRows[0];
     var isBelowDesktop = useMediaQuery('BELOW_DESKTOP');
+    var firstVisibleBodyRowIndex = tableCellRows.findIndex(function (_, index) { return index > 0 && !hideRows.includes(index); });
+    var lastVisibleRowIndex = tableCellRows.reduce(function (last, row, index) {
+        return index > 0 && !hideRows.includes(index) && row.length > 1 ? index : last;
+    }, -1);
     var getModalTitleFromColumnHeader = function (cellIndex) {
         var _a;
         var firstCellInColumn = (_a = tableCellRows === null || tableCellRows === void 0 ? void 0 : tableCellRows[0]) === null || _a === void 0 ? void 0 : _a[cellIndex];
@@ -22793,7 +22801,10 @@ var TableSection = function (_a) {
     };
     var isVisibleColumn = React.useCallback(function (cellIndex) { return !hideColumns.includes(cellIndex); }, [hideColumns]);
     var isVisibleRow = React.useCallback(function (rowIndex) { return !hideRows.includes(rowIndex); }, [hideRows]);
-    return (jsxRuntime.jsxs("table", { className: classNames(className, 'w100', styles$4.table), width: width, children: [jsxRuntime.jsx("caption", { className: "sr-only", children: title }), headerRow && (jsxRuntime.jsx("thead", { className: hideHeader ? 'sr-only' : '', children: jsxRuntime.jsx("tr", { children: headerRow.map(function (tableCellData, cellIndex) {
+    var visibleColumnsLength = (_c = headerRow === null || headerRow === void 0 ? void 0 : headerRow.filter(function (_, cellIndex) { return isVisibleColumn(cellIndex); }).length) !== null && _c !== void 0 ? _c : 0;
+    return (jsxRuntime.jsxs("table", { className: classNames(className, 'w100', styles$4.table, (_b = {},
+            _b[styles$4.tableMultiplePlans] = visibleColumnsLength > 2,
+            _b)), width: width, children: [jsxRuntime.jsx("caption", { className: "sr-only", children: title }), headerRow && (jsxRuntime.jsx("thead", { className: hideHeader ? 'sr-only' : '', children: jsxRuntime.jsx("tr", { children: headerRow.map(function (tableCellData, cellIndex) {
                         var isFirstCellInRow = cellIndex === 0;
                         var cellReplacementData = (tableCellData.cellId &&
                             (cellReplacements === null || cellReplacements === void 0 ? void 0 : cellReplacements[tableCellData.cellId])) ||
@@ -22802,29 +22813,39 @@ var TableSection = function (_a) {
                             openModal: openModal,
                             modalTitle: (isBaseCell(tableCellData) && tableCellData.text) ||
                                 getModalTitleFromColumnHeader(cellIndex),
-                            align: isFirstCellInRow ? 'left' : 'center',
+                            align: 'left',
                         });
-                        return (isVisibleColumn(cellIndex) && (jsxRuntime.jsx(TableCell, __assign({ isBelowDesktop: isBelowDesktop, isHeader: true, isFirstCellInRow: isFirstCellInRow, isTopLeftCell: isFirstCellInRow }, cellProps, { imageComponent: imageComponent }), cellIndex)));
+                        return (isVisibleColumn(cellIndex) && (jsxRuntime.jsx(TableCell, __assign({ isBelowDesktop: isBelowDesktop, isHeader: true, isFirstCellInRow: isFirstCellInRow, isTopLeftCell: isFirstCellInRow, isSelectedColumn: selectedColumn === cellIndex, selectedColumnPosition: selectedColumn === cellIndex ? 'top' : undefined }, cellProps, { imageComponent: imageComponent }), cellIndex)));
                     }) }) })), jsxRuntime.jsx("tbody", { children: tableCellRows.map(function (row, rowIndex) {
                     return rowIndex > 0 && isVisibleRow(rowIndex) && (jsxRuntime.jsx("tr", { className: styles$4.tr, children: row.map(function (tableCellData, cellIndex) {
                             var key = "".concat(rowIndex, "-").concat(cellIndex);
                             var isFirstCellInRow = cellIndex === 0;
                             var titleFromRow = getModalTitleFromRowHeader(row);
+                            var isSelected = selectedColumn === cellIndex;
+                            var getSelectedColumnPosition = function () {
+                                if (!isSelected)
+                                    return undefined;
+                                if (rowIndex === lastVisibleRowIndex)
+                                    return 'bottom';
+                                if (hideHeader && rowIndex === firstVisibleBodyRowIndex)
+                                    return 'top';
+                                return 'middle';
+                            };
                             var cellReplacementData = (tableCellData.cellId &&
                                 (cellReplacements === null || cellReplacements === void 0 ? void 0 : cellReplacements[tableCellData.cellId])) ||
                                 {};
                             var cellProps = __assign(__assign(__assign({}, tableCellData), cellReplacementData), {
                                 openModal: openModal,
                                 modalTitle: (tableCellData === null || tableCellData === void 0 ? void 0 : tableCellData.modalTitle) || titleFromRow,
-                                align: isFirstCellInRow ? 'left' : 'center',
+                                align: 'left',
                             });
-                            return (!hideColumns.includes(cellIndex) && (jsxRuntime.jsx(TableCell, __assign({ isBelowDesktop: isBelowDesktop, isFirstCellInRow: isFirstCellInRow }, cellProps, { imageComponent: imageComponent }), key)));
+                            return (!hideColumns.includes(cellIndex) && (jsxRuntime.jsx(TableCell, __assign({ isBelowDesktop: isBelowDesktop, isFirstCellInRow: isFirstCellInRow, isSelectedColumn: isSelected, selectedColumnPosition: getSelectedColumnPosition() }, cellProps, { imageComponent: imageComponent }), key)));
                         }) }, rowIndex));
                 }) })] }));
 };
 
-var css_248z$3 = ".TableContents-module_cardWrapper__2OVMv {\n  height: 88px;\n}\n\n.TableContents-module_cardButton__1mVp_ div {\n  background-color: #FAF8F5;\n}\n.TableContents-module_cardButton__1mVp_:hover div {\n  border-color: transparent !important;\n  outline-color: transparent !important;\n  box-shadow: none !important;\n  background-color: #FCF7EF !important;\n}\n.TableContents-module_cardButton__1mVp_:focus-visible div {\n  background-color: #FCF7EF !important;\n}\n\n.TableContents-module_card__Mmz6h {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 3;\n}\n\n.TableContents-module_cardIcon__2DXbp {\n  width: 20px;\n  margin-right: 8px;\n}";
-var styles$3 = {"cardWrapper":"TableContents-module_cardWrapper__2OVMv","cardButton":"TableContents-module_cardButton__1mVp_","card":"TableContents-module_card__Mmz6h","cardIcon":"TableContents-module_cardIcon__2DXbp"};
+var css_248z$3 = ".TableContents-module_sectionButtonWrapper__12yA7 {\n  height: 74px;\n}\n\n.TableContents-module_sectionButton__1pY12 {\n  position: absolute;\n  left: 24px;\n  right: 24px;\n  z-index: 3;\n  height: 74px;\n  border: none;\n  border-bottom: 1px solid #e7e7ed;\n  color: #26262e;\n  padding: 0;\n}\n\nbutton.TableContents-module_sectionButton__1pY12 {\n  cursor: pointer;\n}\nbutton.TableContents-module_sectionButton__1pY12:hover {\n  color: #696971;\n}\nbutton.TableContents-module_sectionButton__1pY12:hover .p-h3 {\n  color: #696971;\n}\n\ndiv:last-child > .TableContents-module_sectionButtonWrapper__12yA7 > .TableContents-module_sectionButton__1pY12 {\n  border-bottom: none;\n}";
+var styles$3 = {"sectionButtonWrapper":"TableContents-module_sectionButtonWrapper__12yA7","sectionButton":"TableContents-module_sectionButton__1pY12"};
 styleInject(css_248z$3);
 
 var css_248z$2 = ".Collapsible-module_collapsible__2wWKs {\n  transition: max-height 0.3s ease-in-out;\n  overflow-y: clip;\n}";
@@ -22868,7 +22889,7 @@ var Collapsible = function (_a) {
 
 var TableContents = function (_a) {
     var _b, _c;
-    var className = _a.className, collapsibleSections = _a.collapsibleSections, scrollOnOpen = _a.scrollOnOpen, _d = _a.scrollTopOffset, scrollTopOffset = _d === void 0 ? 0 : _d, stickyHeaderRef = _a.stickyHeaderRef, tableData = _a.tableData, _e = _a.hideColumns, hideColumns = _e === void 0 ? [] : _e, hideDetails = _a.hideDetails, _f = _a.hideRows, hideRows = _f === void 0 ? [] : _f, isMobile = _a.isMobile, openModal = _a.openModal, shouldHideDetails = _a.shouldHideDetails, title = _a.title, cellReplacements = _a.cellReplacements, imageComponent = _a.imageComponent;
+    var className = _a.className, collapsibleSections = _a.collapsibleSections, scrollOnOpen = _a.scrollOnOpen, _d = _a.scrollTopOffset, scrollTopOffset = _d === void 0 ? 0 : _d, stickyHeaderRef = _a.stickyHeaderRef, tableData = _a.tableData, _e = _a.hideColumns, hideColumns = _e === void 0 ? [] : _e, hideDetails = _a.hideDetails, _f = _a.hideRows, hideRows = _f === void 0 ? [] : _f, isMobile = _a.isMobile, openModal = _a.openModal, shouldHideDetails = _a.shouldHideDetails, title = _a.title, cellReplacements = _a.cellReplacements, imageComponent = _a.imageComponent, selectedColumn = _a.selectedColumn;
     var _g = React.useState(null), isSectionOpen = _g[0], setOpenSection = _g[1];
     var lastToggledSection = React.useRef(null);
     var sectionRefs = React.useRef({});
@@ -22905,15 +22926,9 @@ var TableContents = function (_a) {
             var sectionHideRows = hideRows
                 .map(function (globalRowIndex) { return globalRowIndex - globalRowOffset; })
                 .filter(function (localRowIndex) { return localRowIndex >= 0 && localRowIndex < rows.length; });
-            var result = (isFirstSection || isVisible) && (jsxRuntime.jsxs("div", { ref: function (el) { sectionRefs.current[index] = el; }, children: [(section === null || section === void 0 ? void 0 : section.title) && (jsxRuntime.jsx("div", { className: styles$3.cardWrapper, children: jsxRuntime.jsx("div", { className: classNames(styles$3.card, 'p0'), children: jsxRuntime.jsx(Card, __assign({ actionIcon: isExpanded ? (jsxRuntime.jsx(ChevronUpIcon, { size: 24 })) : (jsxRuntime.jsx(ChevronDownIcon, { size: 24 })), "aria-expanded": isExpanded ? 'true' : 'false', "aria-hidden": true, classNames: {
-                                    wrapper: 'pl16',
-                                    buttonWrapper: styles$3.cardButton,
-                                    icon: classNames(styles$3.cardIcon, 'tc-neutral-900'),
-                                }, dropShadow: false, icon: renderedIcon, title: section.title, titleVariant: "medium", variant: "primary" }, (collapsibleSections
-                                ? {
-                                    onClick: function () { return handleToggleSection(index); },
-                                }
-                                : {}))) }) })), jsxRuntime.jsx(Collapsible, { isExpanded: isExpanded, onTransitionEnd: function () { return handleScrollToSection(index); }, children: jsxRuntime.jsx(TableSection, { className: classNames(className, 'mb24'), tableCellRows: isFirstSection ? rows : __spreadArray([firstHeadRow], rows, true), hideColumns: hideColumns, hideRows: sectionHideRows, hideHeader: true, openModal: openModal, title: "".concat(title).concat((section === null || section === void 0 ? void 0 : section.title) ? " - ".concat(section.title) : ''), width: tableWidth, cellReplacements: cellReplacements, imageComponent: imageComponent }) })] }, index));
+            var result = (isFirstSection || isVisible) && (jsxRuntime.jsxs("div", { ref: function (el) { sectionRefs.current[index] = el; }, children: [(section === null || section === void 0 ? void 0 : section.title) && (jsxRuntime.jsx("div", { className: styles$3.sectionButtonWrapper, children: collapsibleSections ? (jsxRuntime.jsxs("button", { type: "button", "aria-expanded": isExpanded, className: classNames('d-flex ai-center jc-between ta-left bg-white', styles$3.sectionButton), onClick: function () { return handleToggleSection(index); }, children: [jsxRuntime.jsxs("span", { className: "d-flex ai-center gap8", children: [renderedIcon, jsxRuntime.jsx("span", { className: "p-h3", children: section.title })] }), isExpanded ? (jsxRuntime.jsx(ChevronUpIcon, { size: 20 })) : (jsxRuntime.jsx(ChevronDownIcon, { size: 20 }))] })) : (jsxRuntime.jsx("div", { className: classNames('d-flex ai-center jc-between ta-left bg-white', styles$3.sectionButton), children: jsxRuntime.jsxs("span", { className: "d-flex ai-center gap8", children: [renderedIcon, jsxRuntime.jsx("span", { className: "p-h3", children: section.title })] }) })) })), jsxRuntime.jsx(Collapsible, { isExpanded: isExpanded, onTransitionEnd: function () { return handleScrollToSection(index); }, children: jsxRuntime.jsx(TableSection, { className: classNames(className, 'mb16', {
+                                mt16: !!(section === null || section === void 0 ? void 0 : section.title),
+                            }), tableCellRows: isFirstSection ? rows : __spreadArray([firstHeadRow], rows, true), hideColumns: hideColumns, hideRows: sectionHideRows, hideHeader: true, openModal: openModal, title: "".concat(title).concat((section === null || section === void 0 ? void 0 : section.title) ? " - ".concat(section.title) : ''), width: tableWidth, cellReplacements: cellReplacements, imageComponent: imageComponent, selectedColumn: selectedColumn }) })] }, index));
             // Update global offset for next section (excluding header row for non-first sections)
             globalRowOffset += rows.length;
             return result;
@@ -23014,24 +23029,24 @@ var defaultTextOverrides = {
 };
 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;
+    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 textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
     var isMobile = useMediaQuery('BELOW_MOBILE');
-    var _q = React.useState(null), infoModalData = _q[0], setInfoModalData = _q[1];
-    var _r = React.useState(true), shouldHideDetails = _r[0], setShouldHideDetails = _r[1];
+    var _s = React.useState(null), infoModalData = _s[0], setInfoModalData = _s[1];
+    var _t = React.useState(true), shouldHideDetails = _t[0], setShouldHideDetails = _t[1];
     var containerRef = React.useRef(null);
     var headerRef = React.useRef(null);
     var stickyHeaderRef = React.useRef(null);
     var columnsLength = tableData[0].rows[0].length;
     useScrollSync(headerRef, containerRef, !isMobile);
-    var _s = useTableNavigation({
+    var _u = useTableNavigation({
         enabled: isMobile,
         containerRef: containerRef,
         onSelectionChanged: onSelectionChanged,
-    }), activeSection = _s.activeSection, navigateTable = _s.navigateTable, setActiveSection = _s.setActiveSection;
+    }), 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];
-    var currentActiveSectionReplacements = (currentActiveSection.cellId &&
+    var currentActiveSectionReplacements = ((currentActiveSection === null || currentActiveSection === void 0 ? void 0 : currentActiveSection.cellId) &&
         (cellReplacements === null || cellReplacements === void 0 ? void 0 : cellReplacements[currentActiveSection.cellId])) ||
         {};
     var activeCellProps = __assign(__assign({}, currentActiveSection), currentActiveSectionReplacements);
@@ -23045,7 +23060,7 @@ var Table = function (_a) {
             setActiveSection(externalActiveSection - 1);
         }
     }, [externalActiveSection]);
-    return (jsxRuntime.jsxs("div", { className: classNames(styles$5.wrapper, 'bg-white'), children: [isMobile ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(titleCell === null || titleCell === void 0 ? void 0 : titleCell.text) && (jsxRuntime.jsx(TableCell, __assign({}, titleCell, { align: "left", isNavigation: true, isTopLeftCell: true, type: undefined }))), !hideTableNavigation && (jsxRuntime.jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsxRuntime.jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)
+    return (jsxRuntime.jsxs("div", { className: classNames(styles$5.wrapper, 'bg-white'), children: [isMobile ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(titleCell === null || titleCell === void 0 ? void 0 : titleCell.text) && (jsxRuntime.jsx(TableCell, __assign({}, titleCell, { align: "left", isNavigation: true, isTopLeftCell: true, type: undefined }))), !hideTableNavigation && currentActiveSection && (jsxRuntime.jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsxRuntime.jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)
                             ? {
                                 openModal: function (body) {
                                     return handleOpenModal({
@@ -23054,7 +23069,7 @@ var Table = function (_a) {
                                     });
                                 },
                             }
-                            : {}), activeCellProps, { imageComponent: imageComponent, isNavigation: true })) }))] })) : (jsxRuntime.jsx("div", { ref: stickyHeaderRef, "aria-hidden": true, className: styles$5.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsxRuntime.jsx("div", { className: styles$5.container, ref: headerRef, children: jsxRuntime.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 }) }) })), jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles$5.container, 'pb8'), children: jsxRuntime.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 }) }), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 1 && hideDetails && (jsxRuntime.jsx(Card, { "data-testid": "show-hide-details", classNames: {
+                            : {}), activeCellProps, { imageComponent: imageComponent, isNavigation: true })) }))] })) : (!hideStickyHeader && (jsxRuntime.jsx("div", { ref: stickyHeaderRef, "aria-hidden": true, className: styles$5.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsxRuntime.jsx("div", { className: styles$5.container, ref: headerRef, children: jsxRuntime.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 }) }) }))), jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles$5.container, 'pb8'), children: jsxRuntime.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 && (jsxRuntime.jsx(Card, { "data-testid": "show-hide-details", classNames: {
                     buttonWrapper: classNames(styles$5.cardButton, 'm8 mt32'),
                     title: 'd-flex gap8 ai-center jc-center fw-bold',
                 }, title: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldHideDetails