@popsure/dirty-swan 0.54.4 → 0.54.6

package/dist/cjs/index.js

@@ -14269,8 +14269,8 @@ var css_248z$8 = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  sc
 var styles$8 = {"th":"TableCell-module_th__2rjCU","fixedCell":"TableCell-module_fixedCell__cL3-m"};
 styleInject(css_248z$8);
 
-var css_248z$7 = ".BaseCell-module_infoButton__VCstV {\n  min-height: initial;\n  height: initial;\n  width: initial;\n  padding: 0;\n}\n\n.BaseCell-module_icon__1775U {\n  margin: 2px;\n}\n\n.BaseCell-module_bigWithUnderline__2xx5X {\n  position: relative;\n  display: none;\n}\n.BaseCell-module_bigWithUnderline__2xx5X:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc( 50% + 16px );\n  height: 4px;\n  width: 100%;\n  max-width: 140px;\n  background-color: #8e8cee;\n}\n@media (min-width: 34rem) {\n  .BaseCell-module_bigWithUnderline__2xx5X {\n    display: flex;\n  }\n}";
-var styles$7 = {"infoButton":"BaseCell-module_infoButton__VCstV","icon":"BaseCell-module_icon__1775U","bigWithUnderline":"BaseCell-module_bigWithUnderline__2xx5X"};
+var css_248z$7 = ".BaseCell-module_relative__1v2X0 {\n  position: relative;\n}\n\n.BaseCell-module_infoButtonAbsolute__Mpjrz {\n  position: absolute;\n  right: -32px;\n}\n\n.BaseCell-module_icon__1775U {\n  margin: 2px;\n}\n\n.BaseCell-module_bigWithUnderline__2xx5X {\n  position: relative;\n  display: none;\n}\n.BaseCell-module_bigWithUnderline__2xx5X:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc( 50% + 16px );\n  height: 4px;\n  width: 100%;\n  max-width: 140px;\n  background-color: #8e8cee;\n}\n@media (min-width: 34rem) {\n  .BaseCell-module_bigWithUnderline__2xx5X {\n    display: flex;\n  }\n}";
+var styles$7 = {"relative":"BaseCell-module_relative__1v2X0","infoButtonAbsolute":"BaseCell-module_infoButtonAbsolute__Mpjrz","icon":"BaseCell-module_icon__1775U","bigWithUnderline":"BaseCell-module_bigWithUnderline__2xx5X"};
 styleInject(css_248z$7);
 
 var css_248z$6 = ".MiniProgressBar-module_progressBar__2K07F {\n  margin-bottom: 4px;\n}\n.MiniProgressBar-module_progressBar__2K07F rect {\n  fill: #ebebff;\n}\n\n.MiniProgressBar-module_filledBars1__ZhQbV rect:first-child {\n  fill: #91919c;\n}\n\n.MiniProgressBar-module_filledBars2__2lH_z rect:nth-child(-n+2) {\n  fill: #91919c;\n}\n\n.MiniProgressBar-module_filledBars3__1OKUj rect:nth-child(-n+3) {\n  fill: #b0cdf3;\n}\n\n.MiniProgressBar-module_filledBars4__T9kuj rect:nth-child(-n+4) {\n  fill: #b0cdf3;\n}\n\n.MiniProgressBar-module_filledBars5__WxVpb rect {\n  fill: #8e8cee;\n}";
@@ -14295,7 +14295,7 @@ var progressLookup = {
     '100%': 5,
 };
 var BaseCell = function (_a) {
-    var _b = _a.align, align = _b === void 0 ? 'center' : _b, checkmarkValue = _a.checkmarkValue, _c = _a.fontVariant, fontVariant = _c === void 0 ? 'NORMAL' : _c, _d = _a.description, description = _d === void 0 ? '' : _d, _e = _a.modalContent, modalContent = _e === void 0 ? '' : _e, openModal = _a.openModal, rating = _a.rating, _f = _a.text, text = _f === void 0 ? '' : _f;
+    var _b = _a.align, align = _b === void 0 ? 'center' : _b, checkmarkValue = _a.checkmarkValue, _c = _a.description, description = _c === void 0 ? '' : _c, _d = _a.fontVariant, fontVariant = _d === void 0 ? 'NORMAL' : _d, _e = _a.hideProgressBar, hideProgressBar = _e === void 0 ? false : _e, _f = _a.modalTitle, modalTitle = _f === void 0 ? '' : _f, _g = _a.modalContent, modalContent = _g === void 0 ? '' : _g, openModal = _a.openModal, rating = _a.rating, _h = _a.text, text = _h === void 0 ? '' : _h;
     var alignClassName = {
         center: 'ta-center jc-center ai-center',
         left: 'ta-left jc-start',
@@ -14303,20 +14303,32 @@ var BaseCell = function (_a) {
     }[align];
     var validRatingValues = [1, 2, 3];
     var SelectedIcon = (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? ZapFilledIcon : StarFilledIcon;
-    var progressBarValue = typeof text === 'string' ? progressLookup[text] : undefined;
-    return (jsxRuntime.jsxs("div", { className: classNames$1('d-flex gap8 ai-center', {
+    var progressBarValue = !hideProgressBar && typeof text === 'string'
+        ? progressLookup[text]
+        : undefined;
+    return (jsxRuntime.jsx("div", { className: classNames$1('d-flex gap8 ai-center', {
             'jc-center': align === 'center',
-        }), children: [jsxRuntime.jsxs("div", { className: classNames$1('d-flex fd-column', alignClassName), children: [progressBarValue !== undefined && (jsxRuntime.jsx(MiniProgressBar, { nFilledBars: progressBarValue })), (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) ? 'primary-500' : 'grey-400', className: styles$7.icon }, value)); }) })), jsxRuntime.jsxs("div", { className: "d-flex ai-center", children: [checkmarkValue !== undefined && (jsxRuntime.jsx("span", { title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsxRuntime.jsx(CheckIcon, { "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "primary-500" })) : (jsxRuntime.jsx(XIcon, { "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "grey-400" })) })), text && fontVariant === 'NORMAL' && (jsxRuntime.jsx("div", { className: "p-p", "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsxRuntime.jsx("div", { className: "p-h1 p--serif tc-primary-500", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'BIG_WITH_UNDERLINE' && (jsxRuntime.jsx("div", { "aria-hidden": true, className: classNames$1('tc-grey-800 p-h2 p--serif', styles$7.bigWithUnderline), children: text }))] }), description && (jsxRuntime.jsx("div", { className: classNames$1('d-flex p-p--small tc-grey-500', alignClassName), children: description }))] }), modalContent && openModal && (jsxRuntime.jsx(TableInfoButton, { onClick: function () { return openModal(modalContent); } }))] }));
+        }), children: jsxRuntime.jsxs("div", { className: classNames$1('d-flex fd-column', alignClassName, styles$7.relative), children: [progressBarValue !== undefined && (jsxRuntime.jsx(MiniProgressBar, { nFilledBars: progressBarValue })), (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) ? 'primary-500' : 'grey-400', className: styles$7.icon }, value)); }) })), jsxRuntime.jsxs("div", { className: "d-flex ai-center", children: [checkmarkValue !== undefined && (jsxRuntime.jsx("span", { title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsxRuntime.jsx(CheckIcon, { "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "primary-500" })) : (jsxRuntime.jsx(XIcon, { "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "grey-400" })) })), jsxRuntime.jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsxRuntime.jsx("div", { className: "p-p d-inline", "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsxRuntime.jsx("div", { className: "p-h1 p--serif tc-primary-500", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'BIG_WITH_UNDERLINE' && (jsxRuntime.jsx("div", { "aria-hidden": true, className: classNames$1('tc-grey-800 p-h2 p--serif', styles$7.bigWithUnderline), children: text })), modalContent && openModal && align == 'left' && (jsxRuntime.jsx("span", { className: "ml8", children: jsxRuntime.jsx(TableInfoButton, { onClick: function () {
+                                            return openModal({
+                                                title: modalTitle,
+                                                body: modalContent,
+                                            });
+                                        } }) }))] })] }), description && (jsxRuntime.jsx("div", { className: classNames$1('d-flex p-p--small tc-grey-500', alignClassName), children: description })), modalContent && openModal && align == 'center' && (jsxRuntime.jsx("span", { className: styles$7.infoButtonAbsolute, children: jsxRuntime.jsx(TableInfoButton, { onClick: function () {
+                            return openModal({
+                                title: modalTitle,
+                                body: modalContent,
+                            });
+                        } }) }))] }) }));
 };
 
-var css_248z$5 = ".CTACell-module_narrow__1EPPT {\n  height: 40px;\n}";
+var css_248z$5 = ".CTACell-module_narrow__1EPPT {\n  height: 40px;\n  padding: 8px !important;\n}";
 var styles$5 = {"narrow":"CTACell-module_narrow__1EPPT"};
 styleInject(css_248z$5);
 
 var CTACell = function (_a) {
     var _b;
-    var title = _a.title, price = _a.price, grey = _a.grey, narrow = _a.narrow, href = _a.href, buttonCaption = _a.buttonCaption;
-    return (jsxRuntime.jsxs("div", { className: "wmn3 ta-center", children: [jsxRuntime.jsxs("p", { className: "p-h3", children: [title, price && jsxRuntime.jsxs("span", { className: "tc-purple-500", children: [" ", price] })] }), jsxRuntime.jsx("a", { className: classNames$1('mt16', (_b = {
+    var title = _a.title, price = _a.price, icon = _a.icon, grey = _a.grey, narrow = _a.narrow, href = _a.href, buttonCaption = _a.buttonCaption;
+    return (jsxRuntime.jsxs("div", { className: "ta-center", children: [jsxRuntime.jsxs("div", { className: "d-flex jc-center ai-center gap8", children: [icon, jsxRuntime.jsxs("p", { className: "p-h3", children: [title, price && jsxRuntime.jsxs("span", { className: "tc-purple-500", children: [" ", price] })] })] }), jsxRuntime.jsx("a", { className: classNames$1('mt16 w100 wmx3', (_b = {
                         'p-btn--primary': !grey,
                         'p-btn--secondary-grey': grey
                     },
@@ -14324,6 +14336,11 @@ var CTACell = function (_a) {
                     _b)), href: href, target: "_blank", rel: "noopener noreferrer", children: buttonCaption })] }));
 };
 
+var CardCell = function (_a) {
+    var title = _a.title, description = _a.description, icon = _a.icon, onClick = _a.onClick, href = _a.href;
+    return (jsxRuntime.jsx("div", { className: "ta-left", children: jsxRuntime.jsx(Card, __assign({ title: title, description: description, density: 'balanced', icon: icon, onClick: onClick }, (href && { href: href, as: 'a' }), { actionIcon: null, showActionIcon: false })) }));
+};
+
 var css_248z$4 = ".ButtonCell-module_buttonCell__x4NNi {\n  color: #26262e;\n  border: 1px solid #d2d2d8;\n  transition: all 0.3s ease-in-out;\n}\n@media (max-width: 34rem) {\n  .ButtonCell-module_buttonCell__x4NNi {\n    max-width: calc(100% - 96px);\n  }\n}\n.ButtonCell-module_buttonCell__x4NNi:disabled {\n  border: none;\n  background-color: #f5f6fb;\n  color: #26262e;\n  opacity: 1;\n  cursor: default;\n}\n.ButtonCell-module_buttonCell__x4NNi:disabled:hover {\n  background-color: #f5f6fb;\n}\n@media (max-width: 34rem) {\n  .ButtonCell-module_buttonCell__x4NNi {\n    pointer-events: none;\n  }\n}\n\n.ButtonCell-module_withoutPrice__2rpe9 {\n  height: 64px;\n}\n\n.ButtonCell-module_withPrice__3bd_t {\n  height: 75px;\n}\n\n.ButtonCell-module_selected__22pF_ {\n  transition: all 0.3 ease-in-out;\n  border: 2px solid #8e8cee;\n  background-color: #f7f7ff;\n}";
 var styles$4 = {"buttonCell":"ButtonCell-module_buttonCell__x4NNi","withoutPrice":"ButtonCell-module_withoutPrice__2rpe9","withPrice":"ButtonCell-module_withPrice__3bd_t","selected":"ButtonCell-module_selected__22pF_"};
 styleInject(css_248z$4);
@@ -14338,10 +14355,10 @@ var ButtonCell = function (_a) {
                 _b)), variant: "filledWhite", type: "submit", onClick: onClick, disabled: disabled, children: [buttonCaption, price && jsxRuntime.jsx("span", { className: "p-p tc-purple-500", children: price })] }) }));
 };
 
-var TableCell = function (_a) {
+var TableCell = require$$0__default['default'].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, cellProps = __rest$1(_a, ["isFirstCellInRow", "isHeader", "isNavigation", "isTopLeftCell"]);
+    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, cellProps = __rest$1(_a, ["isFirstCellInRow", "isHeader", "isNavigation", "isTopLeftCell", "colSpan"]);
     // prettier-ignore
     var Tag = isNavigation
         ? 'div'
@@ -14356,12 +14373,12 @@ var TableCell = function (_a) {
     return (jsxRuntime.jsxs(Tag, __assign({}, scope, { className: classNames$1('bg-white py24 px8', styles$8.th, (_b = {
                 'ta-left': isFirstCellInRow
             },
-            _b[styles$8.fixedCell] = isFirstCellInRow,
+            _b[styles$8.fixedCell] = isFirstCellInRow && colSpan < 1,
             _b.pl32 = isFirstCellInRow,
-            _b)), children: [!cellProps.type && (jsxRuntime.jsx(BaseCell, __assign({}, cellProps, { fontVariant: isTopLeftCell
+            _b)), colSpan: colSpan, children: [!cellProps.type && (jsxRuntime.jsx(BaseCell, __assign({}, cellProps, { fontVariant: isTopLeftCell
                     ? 'BIG_WITH_UNDERLINE'
-                    : (_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))] })));
-};
+                    : (_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$3 = ".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;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* 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_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n}";
 var styles$3 = {"wrapper":"Table-module_wrapper__2MMNq","container":"Table-module_container__3VFLP","stickyHeader":"Table-module_stickyHeader__2uEpP"};
@@ -14427,7 +14444,7 @@ var isBaseCell = function (tableCellData) {
 };
 
 var TableSection = function (_a) {
-    var className = _a.className, tableCellRows = _a.tableCellRows, hideHeader = _a.hideHeader, openModal = _a.openModal, title = _a.title, width = _a.width;
+    var className = _a.className, tableCellRows = _a.tableCellRows, _b = _a.hideColumns, hideColumns = _b === void 0 ? [] : _b, hideHeader = _a.hideHeader, openModal = _a.openModal, title = _a.title, width = _a.width, cellReplacements = _a.cellReplacements;
     var headerRow = tableCellRows === null || tableCellRows === void 0 ? void 0 : tableCellRows[0];
     var getModalTitleFromColumnHeader = function (cellIndex) {
         var _a;
@@ -14451,42 +14468,38 @@ var TableSection = function (_a) {
         var titleFromRow = (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';
         return titleFromRow;
     };
+    var isVisibleColumn = require$$0.useCallback(function (cellIndex) { return (!hideColumns.includes(cellIndex)); }, [hideColumns]);
     return (jsxRuntime.jsxs("table", { className: classNames$1(className, 'w100', styles$2.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 isFirstCellInRow = cellIndex === 0;
-                        return (jsxRuntime.jsx(TableCell, __assign({ isHeader: true, isFirstCellInRow: isFirstCellInRow, isTopLeftCell: isFirstCellInRow }, tableCellData, (isBaseCell(tableCellData)
-                            ? {
-                                openModal: function (body) {
-                                    return openModal === null || openModal === void 0 ? void 0 : openModal({
-                                        body: body,
-                                        title: tableCellData.text ||
-                                            getModalTitleFromColumnHeader(cellIndex),
-                                    });
-                                },
-                                align: isFirstCellInRow ? 'left' : 'center',
-                            }
-                            : {})), cellIndex));
+                        var cellReplacementData = (tableCellData.cellId &&
+                            (cellReplacements === null || cellReplacements === void 0 ? void 0 : cellReplacements[tableCellData.cellId])) ||
+                            {};
+                        var cellProps = __assign(__assign(__assign({}, tableCellData), cellReplacementData), {
+                            openModal: openModal,
+                            modalTitle: (isBaseCell(tableCellData) && tableCellData.text) ||
+                                getModalTitleFromColumnHeader(cellIndex),
+                            align: isFirstCellInRow ? 'left' : 'center',
+                        });
+                        return isVisibleColumn(cellIndex) && (jsxRuntime.jsx(TableCell, __assign({ isHeader: true, isFirstCellInRow: isFirstCellInRow, isTopLeftCell: isFirstCellInRow }, cellProps), cellIndex));
                     }) }) })), jsxRuntime.jsx("tbody", { children: tableCellRows.map(function (row, rowIndex) {
-                    row.length === 1;
-                    return (rowIndex > 0 && (jsxRuntime.jsx("tr", { className: styles$2.tr, children: row.map(function (tableCellData, cellIndex) {
+                    return rowIndex > 0 && (jsxRuntime.jsx("tr", { className: styles$2.tr, children: row.map(function (tableCellData, cellIndex) {
                             var key = "".concat(rowIndex, "-").concat(cellIndex);
                             var isFirstCellInRow = cellIndex === 0;
-                            return (jsxRuntime.jsx(TableCell, __assign({ isFirstCellInRow: isFirstCellInRow }, tableCellData, (isBaseCell(tableCellData)
-                                ? {
-                                    openModal: function (body) {
-                                        var titleFromRow = getModalTitleFromRowHeader(row);
-                                        var titleFromColumnOrRow = getModalTitleFromColumnHeader(cellIndex) ||
-                                            getModalTitleFromRowHeader(row);
-                                        return openModal === null || openModal === void 0 ? void 0 : openModal({
-                                            body: body,
-                                            title: isFirstCellInRow
-                                                ? titleFromRow
-                                                : titleFromColumnOrRow,
-                                        });
-                                    },
-                                    align: isFirstCellInRow ? 'left' : 'center',
-                                }
-                                : {})), key));
-                        }) }, rowIndex)));
+                            var titleFromRow = getModalTitleFromRowHeader(row);
+                            var titleFromColumnOrRow = getModalTitleFromColumnHeader(cellIndex) ||
+                                getModalTitleFromRowHeader(row);
+                            var cellReplacementData = (tableCellData.cellId &&
+                                (cellReplacements === null || cellReplacements === void 0 ? void 0 : cellReplacements[tableCellData.cellId])) ||
+                                {};
+                            var cellProps = __assign(__assign(__assign({}, tableCellData), cellReplacementData), {
+                                openModal: openModal,
+                                modalTitle: isFirstCellInRow
+                                    ? titleFromRow
+                                    : titleFromColumnOrRow,
+                                align: isFirstCellInRow ? 'left' : 'center',
+                            });
+                            return !hideColumns.includes(cellIndex) && (jsxRuntime.jsx(TableCell, __assign({ isFirstCellInRow: isFirstCellInRow }, cellProps), key));
+                        }) }, rowIndex));
                 }) })] }));
 };
 
@@ -14505,8 +14518,8 @@ var Collapsible = function (_a) {
 
 var TableContents = function (_a) {
     var _b, _c;
-    var className = _a.className, collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideDetails = _a.hideDetails, isMobile = _a.isMobile, openModal = _a.openModal, shouldHideDetails = _a.shouldHideDetails, title = _a.title;
-    var _d = require$$0.useState(null), isSectionOpen = _d[0], setOpenSection = _d[1];
+    var className = _a.className, collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, _d = _a.hideColumns, hideColumns = _d === void 0 ? [] : _d, hideDetails = _a.hideDetails, isMobile = _a.isMobile, openModal = _a.openModal, shouldHideDetails = _a.shouldHideDetails, title = _a.title, cellReplacements = _a.cellReplacements;
+    var _e = require$$0.useState(null), isSectionOpen = _e[0], setOpenSection = _e[1];
     var firstHeadRow = (_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 tableWidth = isMobile ? "".concat((firstHeadRow === null || firstHeadRow === void 0 ? void 0 : firstHeadRow.length) * 50, "%") : '';
     var handleToggleSection = function (index) {
@@ -14528,7 +14541,7 @@ var TableContents = function (_a) {
                                 ? {
                                     onClick: function () { return handleToggleSection(index); },
                                 }
-                                : {}))) }) })), jsxRuntime.jsx(Collapsible, { isExpanded: isExpanded, isMobile: isMobile, children: jsxRuntime.jsx(TableSection, { className: classNames$1(className, 'mb24'), tableCellRows: isFirstSection ? rows : __spreadArray$1([firstHeadRow], rows, true), hideHeader: true, openModal: openModal, title: "".concat(title).concat((section === null || section === void 0 ? void 0 : section.title) ? " - ".concat(section.title) : ''), width: tableWidth }) })] }, index)));
+                                : {}))) }) })), jsxRuntime.jsx(Collapsible, { isExpanded: isExpanded, isMobile: isMobile, children: jsxRuntime.jsx(TableSection, { className: classNames$1(className, 'mb24'), tableCellRows: isFirstSection ? rows : __spreadArray$1([firstHeadRow], rows, true), hideColumns: hideColumns, hideHeader: true, openModal: openModal, title: "".concat(title).concat((section === null || section === void 0 ? void 0 : section.title) ? " - ".concat(section.title) : ''), width: tableWidth, cellReplacements: cellReplacements }) })] }, index)));
         }) }));
 };
 
@@ -14624,27 +14637,31 @@ var defaultTextOverrides = {
 };
 var Table = function (_a) {
     var _b, _c, _d, _e, _f;
-    var className = _a.className, collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideDetails = _a.hideDetails, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _g = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _g === void 0 ? 0 : _g, definedTextOverrides = _a.textOverrides, title = _a.title;
+    var className = _a.className, cellReplacements = _a.cellReplacements, collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, _g = _a.hideColumns, hideColumns = _g === void 0 ? [] : _g, hideDetails = _a.hideDetails, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _h = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _h === void 0 ? 0 : _h, definedTextOverrides = _a.textOverrides, title = _a.title;
     var textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
     var isMobile = useMediaQuery('BELOW_MOBILE');
-    var _h = require$$0.useState(null), infoModalData = _h[0], setInfoModalData = _h[1];
-    var _j = require$$0.useState(true), shouldHideDetails = _j[0], setShouldHideDetails = _j[1];
+    var _j = require$$0.useState(null), infoModalData = _j[0], setInfoModalData = _j[1];
+    var _k = require$$0.useState(true), shouldHideDetails = _k[0], setShouldHideDetails = _k[1];
     var containerRef = require$$0.useRef(null);
     var headerRef = require$$0.useRef(null);
     var columnsLength = tableData[0].rows[0].length;
     useScrollSync(headerRef, containerRef, !isMobile);
-    var _k = useTableNavigation({
+    var _l = useTableNavigation({
         enabled: isMobile,
         containerRef: containerRef,
         onSelectionChanged: onSelectionChanged,
-    }), activeSection = _k.activeSection, navigateTable = _k.navigateTable;
+    }), activeSection = _l.activeSection, navigateTable = _l.navigateTable;
     var currentActiveSection = (_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[activeSection];
-    var handleOpenModal = function (_a) {
+    var currentActiveSectionReplacements = (currentActiveSection.cellId &&
+        (cellReplacements === null || cellReplacements === void 0 ? void 0 : cellReplacements[currentActiveSection.cellId])) ||
+        {};
+    var activeCellProps = __assign(__assign({}, currentActiveSection), currentActiveSectionReplacements);
+    var handleOpenModal = require$$0.useCallback(function (_a) {
         var body = _a.body, title = _a.title;
         onModalOpen === null || onModalOpen === void 0 ? void 0 : onModalOpen({ body: body, title: title });
         setInfoModalData({ body: body, title: title });
-    };
-    return (jsxRuntime.jsxs("div", { className: classNames$1(styles$3.wrapper, 'bg-white'), children: [isMobile ? (jsxRuntime.jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsxRuntime.jsx(TableCell, __assign({}, currentActiveSection, (isBaseCell(currentActiveSection)
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: classNames$1(styles$3.wrapper, 'bg-white'), children: [isMobile ? (jsxRuntime.jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsxRuntime.jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)
                     ? {
                         openModal: function (body) {
                             return handleOpenModal({
@@ -14653,7 +14670,7 @@ var Table = function (_a) {
                             });
                         },
                     }
-                    : {}), { isNavigation: true })) })) : (jsxRuntime.jsx("div", { "aria-hidden": true, className: styles$3.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsxRuntime.jsx("div", { className: styles$3.container, ref: headerRef, children: jsxRuntime.jsx(TableSection, { 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, className: className, openModal: handleOpenModal }) }) })), jsxRuntime.jsx("div", { ref: containerRef, className: classNames$1(styles$3.container, 'pb8'), children: jsxRuntime.jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal }) }), hideDetails && (jsxRuntime.jsx(Card, { "data-testid": "show-hide-details", classNames: {
+                    : {}), activeCellProps, { isNavigation: true })) })) : (jsxRuntime.jsx("div", { "aria-hidden": true, className: styles$3.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsxRuntime.jsx("div", { className: styles$3.container, ref: headerRef, children: jsxRuntime.jsx(TableSection, { cellReplacements: cellReplacements, className: className, hideColumns: hideColumns, 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 }) }) })), jsxRuntime.jsx("div", { ref: containerRef, className: classNames$1(styles$3.container, 'pb8'), children: jsxRuntime.jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideColumns: hideColumns, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements }) }), hideDetails && (jsxRuntime.jsx(Card, { "data-testid": "show-hide-details", classNames: {
                     buttonWrapper: 'm8 mt32',
                     title: 'd-flex gap8 ai-center jc-center',
                     wrapper: 'bg-grey-200',