@popsure/dirty-swan 0.54.6 → 0.54.7

package/dist/cjs/index.js

@@ -14325,10 +14325,19 @@ var css_248z$5 = ".CTACell-module_narrow__1EPPT {\n  height: 40px;\n  padding: 8
 var styles$5 = {"narrow":"CTACell-module_narrow__1EPPT"};
 styleInject(css_248z$5);
 
+var IconRenderer = function (_a) {
+    var icon = _a.icon, imageComponent = _a.imageComponent;
+    var ImageComponent = imageComponent !== null && imageComponent !== void 0 ? imageComponent : 'img';
+    var iconIsUrl = typeof icon === 'string';
+    var renderedIcon = iconIsUrl ? (jsxRuntime.jsx(ImageComponent, { src: icon, width: 24, alt: "" })) : (icon);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderedIcon });
+};
+
 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;
-    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 = {
+    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;
+    var renderedIcon = (jsxRuntime.jsx(IconRenderer, { icon: icon, imageComponent: imageComponent }));
+    return (jsxRuntime.jsxs("div", { className: "ta-center", 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-500", children: [" ", price] })] })] }), jsxRuntime.jsx("a", { className: classNames$1('mt16 w100 wmx3', (_b = {
                         'p-btn--primary': !grey,
                         'p-btn--secondary-grey': grey
                     },
@@ -14337,8 +14346,9 @@ var CTACell = function (_a) {
 };
 
 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 title = _a.title, description = _a.description, icon = _a.icon, onClick = _a.onClick, href = _a.href, imageComponent = _a.imageComponent;
+    var renderedIcon = (jsxRuntime.jsx(IconRenderer, { icon: icon, imageComponent: imageComponent }));
+    return (jsxRuntime.jsx("div", { className: "ta-left", children: jsxRuntime.jsx(Card, __assign({ title: title, description: description, density: "balanced", icon: renderedIcon, 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}";
@@ -14444,7 +14454,7 @@ var isBaseCell = function (tableCellData) {
 };
 
 var TableSection = function (_a) {
-    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 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, imageComponent = _a.imageComponent;
     var headerRow = tableCellRows === null || tableCellRows === void 0 ? void 0 : tableCellRows[0];
     var getModalTitleFromColumnHeader = function (cellIndex) {
         var _a;
@@ -14468,7 +14478,7 @@ var TableSection = function (_a) {
         var titleFromRow = (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';
         return titleFromRow;
     };
-    var isVisibleColumn = require$$0.useCallback(function (cellIndex) { return (!hideColumns.includes(cellIndex)); }, [hideColumns]);
+    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;
                         var cellReplacementData = (tableCellData.cellId &&
@@ -14480,7 +14490,7 @@ var TableSection = function (_a) {
                                 getModalTitleFromColumnHeader(cellIndex),
                             align: isFirstCellInRow ? 'left' : 'center',
                         });
-                        return isVisibleColumn(cellIndex) && (jsxRuntime.jsx(TableCell, __assign({ isHeader: true, isFirstCellInRow: isFirstCellInRow, isTopLeftCell: isFirstCellInRow }, cellProps), cellIndex));
+                        return (isVisibleColumn(cellIndex) && (jsxRuntime.jsx(TableCell, __assign({ isHeader: true, isFirstCellInRow: isFirstCellInRow, isTopLeftCell: isFirstCellInRow }, cellProps, { imageComponent: imageComponent }), cellIndex)));
                     }) }) })), jsxRuntime.jsx("tbody", { children: tableCellRows.map(function (row, rowIndex) {
                     return rowIndex > 0 && (jsxRuntime.jsx("tr", { className: styles$2.tr, children: row.map(function (tableCellData, cellIndex) {
                             var key = "".concat(rowIndex, "-").concat(cellIndex);
@@ -14498,7 +14508,7 @@ var TableSection = function (_a) {
                                     : titleFromColumnOrRow,
                                 align: isFirstCellInRow ? 'left' : 'center',
                             });
-                            return !hideColumns.includes(cellIndex) && (jsxRuntime.jsx(TableCell, __assign({ isFirstCellInRow: isFirstCellInRow }, cellProps), key));
+                            return (!hideColumns.includes(cellIndex) && (jsxRuntime.jsx(TableCell, __assign({ isFirstCellInRow: isFirstCellInRow }, cellProps, { imageComponent: imageComponent }), key)));
                         }) }, rowIndex));
                 }) })] }));
 };
@@ -14518,7 +14528,7 @@ var Collapsible = function (_a) {
 
 var TableContents = function (_a) {
     var _b, _c;
-    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 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, imageComponent = _a.imageComponent;
     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, "%") : '';
@@ -14534,14 +14544,15 @@ var TableContents = function (_a) {
                 ? true
                 : isSectionOpen === index || isFirstSection;
             var isVisible = hideDetails ? !shouldHideDetails : true;
+            var renderedIcon = (jsxRuntime.jsx(IconRenderer, { icon: section.icon, imageComponent: imageComponent }));
             return ((isFirstSection || isVisible) && (jsxRuntime.jsxs("div", { children: [(section === null || section === void 0 ? void 0 : section.title) && (jsxRuntime.jsx("div", { className: styles$1.cardWrapper, children: jsxRuntime.jsx("div", { className: classNames$1(styles$1.card, 'p8'), 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: 'bg-grey-200',
                                     icon: 'tc-grey-900',
-                                }, dropShadow: false, icon: section === null || section === void 0 ? void 0 : section.icon, title: section.title, titleVariant: "medium" }, (collapsibleSections
+                                }, dropShadow: false, icon: renderedIcon, title: section.title, titleVariant: "medium" }, (collapsibleSections
                                 ? {
                                     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), 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)));
+                                : {}))) }) })), 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, imageComponent: imageComponent }) })] }, index)));
         }) }));
 };
 
@@ -14637,7 +14648,7 @@ var defaultTextOverrides = {
 };
 var Table = function (_a) {
     var _b, _c, _d, _e, _f;
-    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 cellReplacements = _a.cellReplacements, className = _a.className, collapsibleSections = _a.collapsibleSections, _g = _a.hideColumns, hideColumns = _g === void 0 ? [] : _g, hideDetails = _a.hideDetails, imageComponent = _a.imageComponent, modalContentRenderer = _a.modalContentRenderer, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _h = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _h === void 0 ? 0 : _h, tableData = _a.tableData, definedTextOverrides = _a.textOverrides, title = _a.title;
     var textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
     var isMobile = useMediaQuery('BELOW_MOBILE');
     var _j = require$$0.useState(null), infoModalData = _j[0], setInfoModalData = _j[1];
@@ -14670,13 +14681,15 @@ var Table = function (_a) {
                             });
                         },
                     }
-                    : {}), 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: {
+                    : {}), activeCellProps, { imageComponent: imageComponent, 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, imageComponent: imageComponent }) }) })), 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, imageComponent: imageComponent }) }), 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',
                 }, title: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldHideDetails
                             ? textOverrides.showDetails
-                            : textOverrides.hideDetails, shouldHideDetails ? (jsxRuntime.jsx(ChevronDownIcon, { size: 24 })) : (jsxRuntime.jsx(ChevronUpIcon, { size: 24 }))] }), actionIcon: null, dropShadow: false, titleVariant: "small", density: "compact", onClick: function () { return setShouldHideDetails(function (current) { return !current; }); } })), jsxRuntime.jsx(BottomOrRegularModal, { isOpen: (infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body) ? true : false, title: infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.title, onClose: function () { return setInfoModalData(null); }, children: jsxRuntime.jsx("div", { className: "pt8 p24 wmn6", children: infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body }) })] }));
+                            : textOverrides.hideDetails, shouldHideDetails ? (jsxRuntime.jsx(ChevronDownIcon, { size: 24 })) : (jsxRuntime.jsx(ChevronUpIcon, { size: 24 }))] }), actionIcon: null, dropShadow: false, titleVariant: "small", density: "compact", onClick: function () { return setShouldHideDetails(function (current) { return !current; }); } })), jsxRuntime.jsx(BottomOrRegularModal, { isOpen: (infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body) ? true : false, title: infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.title, onClose: function () { return setInfoModalData(null); }, children: jsxRuntime.jsx("div", { className: "pt8 p24 wmn6", children: modalContentRenderer
+                        ? modalContentRenderer(infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body)
+                        : infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body }) })] }));
 };
 
 exports.Accordion = Accordion;