@popsure/dirty-swan 0.48.1 → 0.49.2

package/dist/cjs/index.js

@@ -3864,21 +3864,22 @@ var defaultPlaceholders = {
     yearFormat: "YYYY",
     error: "Please enter a valid date"
 };
-var isDateValid = function (date, yearBoundaries) {
+var isDateValid = function (date, yearBoundaries, dateObject) {
     var _a = yearBoundaries.min, min = _a === void 0 ? 0 : _a, _b = yearBoundaries.max, max = _b === void 0 ? 0 : _b;
     if (!date) {
-        return { isValid: false, field: 'all' };
+        return { isValid: false, errorType: 'default' };
     }
+    var isValidYear = (dateObject === null || dateObject === void 0 ? void 0 : dateObject.year) && String(dateObject === null || dateObject === void 0 ? void 0 : dateObject.year).length === 4;
     if (max && dayjs(date).isAfter(max + "-01-01", 'year')) {
-        return { isValid: false, field: 'year' };
+        return { isValid: false, errorType: isValidYear ? 'afterMax' : 'default' };
     }
     if (min && dayjs(date).isBefore(min + "-01-01", 'year')) {
-        return { isValid: false, field: 'year' };
+        return { isValid: false, errorType: isValidYear ? 'beforeMin' : 'default' };
     }
-    var isDateValid = dayjs(date, COLLECTABLE_DATE_FORMAT, true).isValid();
+    var isValidDate = dayjs(date, COLLECTABLE_DATE_FORMAT, true).isValid();
     return {
-        isValid: isDateValid,
-        field: isDateValid ? undefined : 'all',
+        isValid: isValidDate,
+        errorType: 'default'
     };
 };
 var DateSelector = function (_a) {
@@ -3892,9 +3893,9 @@ var DateSelector = function (_a) {
     require$$0.useEffect(function () {
         var calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
         if (value !== calendarDateValue && (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.day) && (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.month) && (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.year)) {
-            var _a = isDateValid(value, yearBoundaries), isValid = _a.isValid, field = _a.field;
+            var _a = isDateValid(value, yearBoundaries, calendarDateValue), isValid = _a.isValid, errorType = _a.errorType;
             setInternalValue(calendarDateValue);
-            setHasError(isValid ? undefined : field);
+            setHasError(isValid ? undefined : errorType);
             setIsDirty(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3908,13 +3909,16 @@ var DateSelector = function (_a) {
             month: tempValue.month || 0,
             year: tempValue.year || 0,
         });
-        var _b = isDateValid(formattedDate, yearBoundaries), isValid = _b.isValid, field = _b.field;
-        if (dayjs(formattedDate, COLLECTABLE_DATE_FORMAT, true).isValid()) {
+        var _b = isDateValid(formattedDate, yearBoundaries, tempValue), isValid = _b.isValid, errorType = _b.errorType;
+        var isDateInValidFormat = dayjs(formattedDate, COLLECTABLE_DATE_FORMAT, true).isValid();
+        if (isDateInValidFormat) {
             setIsDirty(true);
         }
-        setHasError(isValid ? undefined : field);
-        onChange(isValid ? formattedDate : "");
+        setHasError(isValid ? undefined : errorType);
         setIsCalendarOpen(false);
+        if (isDateInValidFormat || isDirty) {
+            onChange(isValid ? formattedDate : "");
+        }
     };
     var handleOnKeyDown = function (event, index) {
         var _a, _b, _c;
@@ -3969,7 +3973,7 @@ var DateSelector = function (_a) {
     };
     var getInputProps = function (key, index) {
         var _a, _b;
-        return (__assign({ 'data-cy': "date-selector-" + key, 'data-testid': "date-selector-" + key, className: styles$z[key + "Input"], id: key, name: key, maxLength: key === 'year' ? 4 : 2, required: true, label: placeholders === null || placeholders === void 0 ? void 0 : placeholders[key], placeholder: (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders[key + "Format"]) !== null && _a !== void 0 ? _a : "", labelInsideInput: true, value: (_b = internalValue[key]) !== null && _b !== void 0 ? _b : '', error: (hasError && [key, 'all'].includes(hasError)) && isDirty, type: "text", inputMode: "numeric", ref: function (el) { itemsRef.current[index] = el; }, onKeyUp: function (event) { return handleOnKeyUp(event, index); }, onKeyDown: function (event) { return handleOnKeyDown(event, index); }, onChange: function (_a) {
+        return (__assign({ 'data-cy': "date-selector-" + key, 'data-testid': "date-selector-" + key, className: styles$z[key + "Input"], id: key, name: key, maxLength: key === 'year' ? 4 : 2, required: true, label: placeholders === null || placeholders === void 0 ? void 0 : placeholders[key], placeholder: (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders[key + "Format"]) !== null && _a !== void 0 ? _a : "", labelInsideInput: true, value: (_b = internalValue[key]) !== null && _b !== void 0 ? _b : '', error: hasError && isDirty, type: "text", inputMode: "numeric", ref: function (el) { itemsRef.current[index] = el; }, onKeyUp: function (event) { return handleOnKeyUp(event, index); }, onKeyDown: function (event) { return handleOnKeyDown(event, index); }, onChange: function (_a) {
                 var target = _a.target;
                 return handleOnChange(key, target.value);
             } }, (inputProps === null || inputProps === void 0 ? void 0 : inputProps(key)) || {}));
@@ -3978,7 +3982,11 @@ var DateSelector = function (_a) {
                                     jsxRuntime.jsx(Input, __assign({}, getInputProps('month', 1)), void 0)] }), void 0),
                             jsxRuntime.jsx(Input, __assign({}, getInputProps('year', 2)), void 0)] }), void 0),
                     jsxRuntime.jsx(Calendar, { dateFormat: COLLECTABLE_DATE_FORMAT, yearBoundaries: yearBoundaries, displayCalendar: displayCalendar, dayjsLocale: dayjsLocale, firstDayOfWeek: firstDayOfWeek, isOpen: isCalendarOpen, setCalendarOpen: setIsCalendarOpen, value: value, onChange: onChange }, void 0)] }), void 0),
-            hasError && isDirty && (jsxRuntime.jsx("p", __assign({ className: "p-p--small tc-red-500 w100 mt8" }, { children: placeholders.error }), void 0))] }, void 0));
+            hasError && isDirty && (jsxRuntime.jsx("p", __assign({ className: classNames$1(hasError && isDirty ? 'd-block' : 'd-none', "p-p--small tc-red-500 w100 mt8"), "data-testid": "date-error-message" }, { children: {
+                    default: placeholders.error,
+                    afterMax: placeholders.errorAfterMaxYear || "Please choose a date before " + (yearBoundaries.max + 1),
+                    beforeMin: placeholders.errorBeforeMinYear || "Please choose a date after " + (yearBoundaries.min - 1),
+                }[hasError || "default"] }), void 0))] }, void 0));
 };
 
 /*!
@@ -12809,7 +12817,7 @@ var ScrollSyncPane = function (_Component) {
       }
     };
 
-    _this.childRef = (0, _react.createRef)();
+    _this.childRef = props.innerRef ? props.innerRef : (0, _react.createRef)();
     return _this;
   }
 
@@ -12860,7 +12868,9 @@ var ScrollSyncPane = function (_Component) {
       if (this.props.attachTo) {
         return this.props.children;
       }
-      return (0, _react.cloneElement)(_react.Children.only(this.props.children), { ref: this.childRef });
+      return (0, _react.cloneElement)(_react.Children.only(this.props.children), {
+        ref: this.childRef
+      });
     }
   }]);
 
@@ -12872,7 +12882,9 @@ ScrollSyncPane.propTypes = {
   children: _propTypes2.default.node.isRequired,
   attachTo: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.shape({ current: _propTypes2.default.any })]),
   group: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]),
-  enabled: _propTypes2.default.bool
+  enabled: _propTypes2.default.bool,
+  innerRef: _propTypes2.default.oneOfType([// Either a function
+  _propTypes2.default.func, _propTypes2.default.shape({ current: _propTypes2.default.any })])
 };
 ScrollSyncPane.defaultProps = {
   group: 'default',
@@ -13563,7 +13575,7 @@ module.exports = function(isValidElement, throwOnDirectAccess) {
 
 }(dist$1));
 
-var css_248z$b = ".AccordionItem-module_container__29xle {\n  width: min-content;\n  width: var(--growContent, min-content);\n  margin: 0 auto;\n}\n\n.AccordionItem-module_container__29xle + .AccordionItem-module_container__29xle {\n  margin-top: 8px;\n}\n\n.AccordionItem-module_chevron__1Pdoe {\n  transition: filter 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n\n.AccordionItem-module_chevronClosed__1Sq5g {\n  transform: rotate(180deg);\n}\n\n.AccordionItem-module_iconAndTextContainer__1K9NF {\n  column-gap: 12px;\n}\n\n.AccordionItem-module_headerButton__1C03u {\n  border: none;\n  background: #fafaff;\n  column-gap: 16px;\n  cursor: pointer;\n  font-family: inherit;\n  outline: none;\n  position: relative;\n  text-align: inherit;\n  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n.AccordionItem-module_headerButton__1C03u:hover {\n  background: #ebebff;\n}\n\n.AccordionItem-module_headerButton__1C03u:hover .AccordionItem-module_chevron__1Pdoe {\n  filter: brightness(0.425);\n}";
+var css_248z$b = ".AccordionItem-module_container__29xle {\n  width: min-content;\n  width: var(--growContent, min-content);\n  max-width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.AccordionItem-module_chevron__1Pdoe {\n  transition: filter 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n\n.AccordionItem-module_chevronClosed__1Sq5g {\n  transform: rotate(180deg);\n}\n\n.AccordionItem-module_iconAndTextContainer__1K9NF {\n  column-gap: 12px;\n}\n\n.AccordionItem-module_headerButton__1C03u {\n  border: none;\n  background: #fafaff;\n  column-gap: 16px;\n  cursor: pointer;\n  font-family: inherit;\n  outline: none;\n  position: relative;\n  text-align: inherit;\n  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n.AccordionItem-module_headerButton__1C03u:hover {\n  background: #ebebff;\n}\n\n.AccordionItem-module_headerButton__1C03u:hover .AccordionItem-module_chevron__1Pdoe {\n  filter: brightness(0.425);\n}";
 var styles$a = {"container":"AccordionItem-module_container__29xle","chevron":"AccordionItem-module_chevron__1Pdoe","chevronClosed":"AccordionItem-module_chevronClosed__1Sq5g","iconAndTextContainer":"AccordionItem-module_iconAndTextContainer__1K9NF","headerButton":"AccordionItem-module_headerButton__1C03u"};
 styleInject(css_248z$b);
 
@@ -13581,7 +13593,7 @@ var AccordionItem = function (_a) {
             onClose();
         }
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "d-flex fd-column " + className + " " + styles$a.container }, { children: [jsxRuntime.jsxs("button", __assign({ className: "d-flex ai-center jc-between " + styles$a.headerButton + " " + headerClassName, onClick: handleClick, type: "button" }, { children: [jsxRuntime.jsx("div", __assign({ className: "d-flex ai-center " + styles$a.iconAndTextContainer }, { children: typeof label === 'string' ? (jsxRuntime.jsx("h4", __assign({ className: "p-h4" }, { children: label }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: label }, void 0)) }), void 0),
+    return (jsxRuntime.jsxs("section", __assign({ className: "d-flex fd-column " + styles$a.container + " " + className }, { children: [jsxRuntime.jsxs("button", __assign({ className: "d-flex ai-center jc-between " + styles$a.headerButton + " " + headerClassName, onClick: handleClick, type: "button" }, { children: [jsxRuntime.jsx("div", __assign({ className: "d-flex ai-center " + styles$a.iconAndTextContainer }, { children: typeof label === 'string' ? (jsxRuntime.jsx("h4", __assign({ className: "p-h4" }, { children: label }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: label }, void 0)) }), void 0),
                     jsxRuntime.jsx(ChevronSVG, { className: styles$a.chevron + " " + (!isOpen && styles$a.chevronClosed) }, void 0)] }), void 0),
             jsxRuntime.jsx(AnimateHeight, __assign({ duration: 300, height: isOpen ? 'auto' : 0.1 }, { children: children }), void 0)] }), void 0));
 };
@@ -13591,13 +13603,19 @@ var Chevron = function (_a) {
     return (jsxRuntime.jsx("svg", __assign({ width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsxRuntime.jsx("path", { d: "M15 12.5l-5-5-5 5", stroke: "#8E8CEE", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
 };
 
-var css_248z$a = ".style-module_header__32rw- {\n  position: relative;\n}\n.style-module_header__32rw- > div {\n  width: var(--tableWidth);\n  max-width: 100vw;\n}\n.style-module_header__32rw- > div:nth-child(n+3) {\n  margin: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_header__32rw- > div {\n    width: 256px;\n    width: var(--cellWidth, 256px);\n    max-width: var(--tableWidth);\n    scroll-snap-align: unset;\n  }\n}\n\n.style-module_cell__1NoZ6 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  scroll-snap-align: end;\n  line-height: 24px;\n  padding: 16px;\n  color: #4c4c53;\n  width: 50vw;\n  max-width: calc(var(--tableWidth) / 2);\n}\n.style-module_cell__1NoZ6:first-child {\n  background-color: white;\n  /** Add scroll snap to every column except the first one */\n  scroll-snap-align: unset;\n}\n.style-module_cell__1NoZ6:nth-child(n+3) {\n  margin-left: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:nth-child(n+3) {\n    margin-left: unset;\n  }\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6 {\n    flex: 1 0 256px;\n    flex: 1 0 var(--cellWidth, 256px);\n    width: 256px;\n    width: var(--cellWidth, 256px);\n    padding: 24px;\n  }\n  .style-module_cell__1NoZ6:last-child {\n    padding: 24px 8px 24px 24px;\n  }\n}\n\nh4.style-module_cell__1NoZ6 {\n  max-width: min(288px, calc(var(--tableWidth) / 2));\n  max-width: min(var(--firstColumnWidth, 288px), calc(var(--tableWidth) / 2));\n}\n\n.style-module_title__1xYvu {\n  position: relative;\n  color: #26262e;\n  display: none;\n}\n.style-module_title__1xYvu: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  .style-module_title__1xYvu {\n    display: flex;\n  }\n}\n\n.style-module_sticky__2T5jm {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2T5jm {\n    border-right: 1px solid #fafaff;\n    flex: 1 0 288px;\n  }\n}\n\nh4.style-module_addon__CPf60 {\n  border-right: none;\n  max-width: calc(100vw - 64px);\n  width: 100vw;\n}\n@media (min-width: 64rem) {\n  h4.style-module_addon__CPf60 {\n    max-width: 976px;\n  }\n}";
+var css_248z$a = ".style-module_header__32rw- {\n  position: relative;\n}\n.style-module_header__32rw- > div {\n  width: var(--tableWidth);\n  max-width: 100vw;\n}\n.style-module_header__32rw- > div:nth-child(n+3) {\n  margin: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_header__32rw- > div {\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    max-width: var(--tableWidth);\n    scroll-snap-align: unset;\n  }\n}\n\n.style-module_cell__1NoZ6 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  scroll-snap-align: end;\n  line-height: 24px;\n  padding: 16px 8px;\n  color: #26262e;\n  width: 50vw;\n  max-width: calc(var(--tableWidth) / 2);\n}\n.style-module_cell__1NoZ6:first-child {\n  padding: 16px 8px 16px 16px;\n}\n.style-module_cell__1NoZ6:first-child {\n  background-color: white;\n  /** Add scroll snap to every column except the first one */\n  scroll-snap-align: unset;\n}\n.style-module_cell__1NoZ6:nth-child(n+3) {\n  margin-left: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:nth-child(n+3) {\n    margin-left: unset;\n  }\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6 {\n    flex: 1 0 211px;\n    flex: 1 0 var(--cellWidth, 211px);\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    padding: 24px 8px;\n  }\n  .style-module_cell__1NoZ6:first-child {\n    padding: 24px 8px 24px 24px;\n  }\n}\n\nh4.style-module_cell__1NoZ6 {\n  max-width: min(212px, calc(var(--tableWidth) / 2));\n  max-width: min(var(--firstColumnWidth, 212px), calc(var(--tableWidth) / 2));\n}\n\n.style-module_title__1xYvu {\n  position: relative;\n  color: #26262e;\n  display: none;\n}\n.style-module_title__1xYvu: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  .style-module_title__1xYvu {\n    display: flex;\n  }\n}\n\n.style-module_sticky__2T5jm {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2T5jm {\n    border-right: 1px solid #fafaff;\n    flex: 1 0 288px;\n  }\n}\n\nh4.style-module_addon__CPf60 {\n  border-right: none;\n  max-width: calc(100vw - 64px);\n  width: 100%;\n}\n@media (min-width: 64rem) {\n  h4.style-module_addon__CPf60 {\n    max-width: 976px;\n  }\n}";
 var styles$9 = {"header":"style-module_header__32rw-","cell":"style-module_cell__1NoZ6","title":"style-module_title__1xYvu","sticky":"style-module_sticky__2T5jm","addon":"style-module_addon__CPf60"};
 styleInject(css_248z$a);
 
 var Row = function (props) {
-    var cell = props.cell, data = props.data, isRowHeader = props.isRowHeader, rowId = props.rowId;
-    return (jsxRuntime.jsxs("div", __assign({ className: "\n        d-flex\n        w-100\n        " + (isRowHeader ? styles$9.header : '') + "\n      " }, { children: [jsxRuntime.jsx("h4", __assign({ className: "\n          " + styles$9.cell + "\n          " + styles$9.sticky + "\n          " + (isRowHeader ? "p-h2 p--serif " + styles$9.title : '') + "\n          " + (typeof cell.key === 'undefined' ? styles$9.addon : '') + "\n        " }, { children: cell.label }), void 0),
+    var _a, _b;
+    var cell = props.cell, data = props.data, isRowHeader = props.isRowHeader, rowId = props.rowId, cellClassName = props.cellClassName;
+    return (jsxRuntime.jsxs("div", __assign({ className: classNames$1('d-flex w-100', (_a = {},
+            _a[styles$9.header] = isRowHeader,
+            _a)) }, { children: [jsxRuntime.jsx("h4", __assign({ className: classNames$1(styles$9.cell, styles$9.sticky, (_b = {},
+                    _b["p-h2 p--serif " + styles$9.title] = isRowHeader,
+                    _b[styles$9.addon] = typeof cell.key === 'undefined',
+                    _b), cellClassName) }, { children: cell.label }), void 0),
             Array.isArray(data) &&
                 data.map(function (item) {
                     /**
@@ -13608,7 +13626,7 @@ var Row = function (props) {
                         return null;
                     if (typeof item[cell.key] === 'undefined')
                         return null;
-                    return (jsxRuntime.jsx("div", __assign({ className: "ta-center " + styles$9.cell }, { children: 
+                    return (jsxRuntime.jsx("div", __assign({ className: classNames$1('ta-center', styles$9.cell, cellClassName) }, { children: 
                         /**
                          * Return a function if `render` option is present
                          * else print the current data source value
@@ -13625,8 +13643,8 @@ var ArrowIcon = function (_a) {
     return (jsxRuntime.jsx("svg", __assign({ width: "14", height: "8", viewBox: "0 0 14 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsxRuntime.jsx("path", { d: "M1 1.00003L7 7.00003L13 1.00003", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
 };
 
-var css_248z$9 = ".style-module_container__3BxOi {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: 0 16px;\n  justify-content: space-between;\n  align-items: center;\n  display: flex;\n}\n@media (min-width: 34rem) {\n  .style-module_container__3BxOi {\n    display: none;\n  }\n}\n\n.style-module_next__3yJsi {\n  transform: rotate(-90deg);\n}\n\n.style-module_prev__3rIR_ {\n  transform: rotate(90deg);\n}\n\n.style-module_arrow__1tlbD {\n  width: 32px;\n  height: 32px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 50%;\n  background-color: #f5f6fb;\n  justify-content: center;\n  align-items: center;\n  stroke: #ebebff;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n  background-color: #f5f6fb;\n  cursor: not-allowed;\n}\n\n.style-module_active__2kklB {\n  stroke: #8e8cee;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n  background-color: #f5f6fb;\n  cursor: pointer;\n}";
-var styles$8 = {"container":"style-module_container__3BxOi","next":"style-module_next__3yJsi","prev":"style-module_prev__3rIR_","arrow":"style-module_arrow__1tlbD","active":"style-module_active__2kklB"};
+var css_248z$9 = ".style-module_container__3BxOi {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: 0 16px;\n  justify-content: space-between;\n  align-items: center;\n  display: flex;\n}\n@media (min-width: 34rem) {\n  .style-module_container__3BxOi {\n    display: none;\n  }\n}\n\n.style-module_next__3yJsi {\n  transform: rotate(-90deg);\n}\n\n.style-module_prev__3rIR_ {\n  transform: rotate(90deg);\n}\n\n.style-module_arrow__1tlbD {\n  width: 32px;\n  height: 32px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 50%;\n  background-color: #f5f6fb;\n  justify-content: center;\n  align-items: center;\n  stroke: #ebebff;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n  background-color: #f5f6fb;\n  cursor: not-allowed;\n}\n\n.style-module_active__2kklB {\n  stroke: #8e8cee;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n  background-color: #f5f6fb;\n  cursor: pointer;\n}\n\n.style-module_noPointerEvents__21KuB {\n  pointer-events: none;\n}";
+var styles$8 = {"container":"style-module_container__3BxOi","next":"style-module_next__3yJsi","prev":"style-module_prev__3rIR_","arrow":"style-module_arrow__1tlbD","active":"style-module_active__2kklB","noPointerEvents":"style-module_noPointerEvents__21KuB"};
 styleInject(css_248z$9);
 
 var TableArrows = function (props) {
@@ -13635,28 +13653,30 @@ var TableArrows = function (props) {
     var handleButtonClick = function (value) { return function () { return onClick(value); }; };
     return (jsxRuntime.jsxs("div", __assign({ className: styles$8.container }, { children: [jsxRuntime.jsx("button", __assign({ onClick: handleButtonClick('prev'), className: classNames$1("p-btn--secondary d-flex", styles$8.prev, styles$8.arrow, (_a = {},
                     _a[styles$8.active] = active.left,
+                    _a[styles$8.noPointerEvents] = !active.left,
                     _a)) }, { children: jsxRuntime.jsx(ArrowIcon, {}, void 0) }), void 0),
             jsxRuntime.jsx("button", __assign({ onClick: handleButtonClick('next'), className: classNames$1("p-btn--secondary d-flex", styles$8.next, styles$8.arrow, (_b = {},
                     _b[styles$8.active] = active.right,
+                    _b[styles$8.noPointerEvents] = !active.right,
                     _b)) }, { children: jsxRuntime.jsx(ArrowIcon, {}, void 0) }), void 0)] }), void 0));
 };
 
-var css_248z$8 = ".style-module_button__2W-YC {\n  background-color: transparent;\n  color: #4c4c53;\n  cursor: pointer;\n  margin: 2px 0;\n  padding: 2px;\n  transition: color 0.3s ease;\n}\n.style-module_button__2W-YC span {\n  border-bottom: 2px dashed #696970;\n  display: inline;\n  transition: border-color 0.3s ease;\n}\n.style-module_button__2W-YC:hover, .style-module_button__2W-YC:focus {\n  color: #8e8cee;\n  outline-color: #8e8cee;\n}\n.style-module_button__2W-YC:hover span, .style-module_button__2W-YC:focus span {\n  border-color: #8e8cee;\n}";
-var styles$7 = {"button":"style-module_button__2W-YC"};
+var css_248z$8 = ".style-module_wrapper__1s115 {\n  position: relative;\n}\n\n.style-module_infoButton__1nIU2 {\n  position: absolute;\n  right: -32px;\n  top: 0;\n}";
+var styles$7 = {"wrapper":"style-module_wrapper__1s115","infoButton":"style-module_infoButton__1nIU2"};
 styleInject(css_248z$8);
 
-var TableButton = function (_a) {
-    var children = _a.children, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (jsxRuntime.jsx("button", __assign({ className: styles$7.button + " " + className, "data-testid": "ds-table-button", onClick: onClick }, { children: jsxRuntime.jsx("span", { children: children }, void 0) }), void 0));
-};
-
 var css_248z$7 = ".style-module_button__3TkNT {\n  padding: 0;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: bottom;\n  border-radius: 12px;\n  width: 24px;\n  height: 24px;\n  transition: all 0.3s ease;\n}\n.style-module_button__3TkNT:hover, .style-module_button__3TkNT:focus {\n  background-color: #f7f7ff;\n}\n.style-module_button__3TkNT:hover svg path, .style-module_button__3TkNT:focus svg path {\n  fill: #b1b0f5;\n}\n.style-module_button__3TkNT svg {\n  transition: all 0.3s ease;\n}\n.style-module_button__3TkNT svg path {\n  fill: #d2d2d8;\n}\n.style-module_button__3TkNT:focus-visible {\n  box-shadow: 0 0 0 2px #8e8cee;\n}";
 var styles$6 = {"button":"style-module_button__3TkNT"};
 styleInject(css_248z$7);
 
 var TableInfoButton = function (_a) {
     var onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (jsxRuntime.jsx("button", __assign({ className: "p-btn--secondary " + styles$6.button + " " + className, type: "button", onClick: onClick }, { children: jsxRuntime.jsx(Info$2, { size: 20 }, void 0) }), void 0));
+    return (jsxRuntime.jsx("button", __assign({ className: "p-btn--secondary " + styles$6.button + " " + className, type: "button", "data-testid": "ds-table-info-button", onClick: onClick }, { children: jsxRuntime.jsx(Info$2, { size: 20 }, void 0) }), void 0));
+};
+
+var TableButton = function (_a) {
+    var children = _a.children, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b;
+    return (jsxRuntime.jsxs("div", __assign({ className: styles$7.wrapper }, { children: [children, jsxRuntime.jsx(TableInfoButton, { className: styles$7.infoButton + " " + className, "data-testid": "ds-table-button", onClick: onClick }, void 0)] }), void 0));
 };
 
 var StarIcon = function (_a) {
@@ -13694,7 +13714,10 @@ styleInject(css_248z$5);
 var TableRowHeader = function (_a) {
     var icon = _a.icon, label = _a.label, subtitle = _a.subtitle, onClickInfo = _a.onClickInfo;
     return (jsxRuntime.jsxs("div", __assign({ className: "d-flex" }, { children: [icon && jsxRuntime.jsx("span", __assign({ className: "mr8 " + styles$4.icon }, { children: icon }), void 0),
-            jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", __assign({ className: "p-p d-inline" }, { children: !onClickInfo ? (jsxRuntime.jsx("span", { children: label }, void 0)) : (jsxRuntime.jsx(TableButton, __assign({ className: "mr8 ta-left", onClick: onClickInfo }, { children: label }), void 0)) }), void 0),
+            jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("p", __assign({ className: "p-p d-inline" }, { children: [jsxRuntime.jsx("span", __assign({ className: classNames$1({
+                                    mr8: onClickInfo,
+                                }) }, { children: label }), void 0),
+                            onClickInfo && jsxRuntime.jsx(TableInfoButton, { onClick: onClickInfo }, void 0)] }), void 0),
                     subtitle && jsxRuntime.jsx("p", __assign({ className: "p-p--small tc-grey-500" }, { children: subtitle }), void 0)] }, void 0)] }), void 0));
 };
 
@@ -13706,10 +13729,10 @@ var TableTrueFalse = function (_a) {
     return (jsxRuntime.jsx("svg", __assign({ width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.707 1.707A1 1 0 0010.293.293L6 4.586 1.707.293A1 1 0 00.293 1.707L4.586 6 .293 10.293a1 1 0 101.414 1.414L6 7.414l4.293 4.293a1 1 0 001.414-1.414L7.414 6l4.293-4.293z", fill: "#D2D2D8" }, void 0) }), void 0));
 };
 
-var useComparisonTable = function () {
-    var _a = require$$0.useState(false), showMore = _a[0], setShowMore = _a[1];
-    var _b = require$$0.useState(1400), headerWidth = _b[0], setHeaderWidth = _b[1];
-    var _c = require$$0.useState(''), headerId = _c[0], setHeaderId = _c[1];
+var useComparisonTable = function (_a) {
+    var onSelectionChanged = _a.onSelectionChanged;
+    var _b = require$$0.useState(false), showMore = _b[0], setShowMore = _b[1];
+    var _c = require$$0.useState(1400), headerWidth = _c[0], setHeaderWidth = _c[1];
     var _d = require$$0.useState(0), selectedTabIndex = _d[0], setSelectedTabIndex = _d[1];
     var _e = require$$0.useState(''), selectedSection = _e[0], setSelectedSection = _e[1];
     var headerRef = require$$0.useRef(null);
@@ -13795,20 +13818,11 @@ var useComparisonTable = function () {
         });
     }); };
     require$$0.useEffect(function () {
-        if (headerRef.current) {
-            return;
-        }
-        var headerById = document.getElementById(headerId);
-        if (headerById) {
-            scrollContainerCallbackRef(headerById);
-        }
-    }, [headerId, scrollContainerCallbackRef]);
-    require$$0.useEffect(function () {
-        setHeaderId(generateId());
-    }, []);
+        onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged(selectedTabIndex);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedTabIndex]);
     return {
         headerWidth: headerWidth,
-        headerId: headerId,
         contentContainerRef: contentContainerRef,
         selectedSection: selectedSection,
         setSelectedSection: setSelectedSection,
@@ -13821,26 +13835,27 @@ var useComparisonTable = function () {
     };
 };
 
-var css_248z$4 = ".style-module_container__xHPlk {\n  width: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n@media (min-width: 34rem) {\n  .style-module_container__xHPlk {\n    scroll-snap-type: unset;\n  }\n}\n\n.style-module_noScrollBars__1ri_E {\n  scrollbar-width: none;\n  /* Firefox */\n  -ms-overflow-style: none;\n  /* Internet Explorer 10+ */\n  scroll-snap-type: unset;\n}\n.style-module_noScrollBars__1ri_E::-webkit-scrollbar {\n  /* WebKit */\n  width: 0;\n  height: 0;\n}\n\n.style-module_overflow-container__oBPQw {\n  width: max-content;\n  min-width: 100%;\n}\n\n.style-module_group-container__2G6Ix {\n  display: flex;\n  flex-flow: column;\n  width: max-content;\n  width: var(--growContent, max-content);\n  margin: auto;\n}\n\n.style-module_group-title__2vvRm {\n  width: 100%;\n  background-color: #fafaff;\n  border-radius: 8px;\n  margin-top: 48px;\n}\n.style-module_group-title__2vvRm > h4 {\n  padding: 24px;\n  display: inline-block;\n}\n@media (min-width: 34rem) {\n  .style-module_group-title__2vvRm {\n    margin-top: 72px;\n  }\n}\n\n.style-module_sticky__2Xmbl {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2Xmbl {\n    border-right: 1px solid #fafaff;\n  }\n}\n\n.style-module_header__23SZy {\n  position: sticky;\n  top: 0;\n  top: var(--stickyHeaderTopOffset, 0);\n  z-index: 2;\n  background-color: white;\n}\n.style-module_header__23SZy .style-module_container__xHPlk {\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n}\n.style-module_header__23SZy .style-module_container__xHPlk::-webkit-scrollbar {\n  display: none;\n}\n\n.style-module_show-details-container__1smn4 {\n  width: 100%;\n  border: none;\n}\n\n.style-module_show-details-button__3HR-p {\n  font-family: inherit;\n  background-color: #fafaff;\n  border: none;\n  border-radius: 8px;\n  height: 64px;\n  justify-content: center;\n  align-items: center;\n}\n.style-module_show-details-button__3HR-p svg {\n  margin-left: 8px;\n}\n\n.style-module_icon-inverted__1SnO1 {\n  transform: rotate(180deg);\n  transition: all 0.25s ease;\n}";
-var baseStyles = {"container":"style-module_container__xHPlk","noScrollBars":"style-module_noScrollBars__1ri_E","overflow-container":"style-module_overflow-container__oBPQw","group-container":"style-module_group-container__2G6Ix","group-title":"style-module_group-title__2vvRm","sticky":"style-module_sticky__2Xmbl","header":"style-module_header__23SZy","show-details-container":"style-module_show-details-container__1smn4","show-details-button":"style-module_show-details-button__3HR-p","icon-inverted":"style-module_icon-inverted__1SnO1"};
+var css_248z$4 = ".style-module_container__xHPlk {\n  width: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n@media (min-width: 34rem) {\n  .style-module_container__xHPlk {\n    scroll-snap-type: unset;\n  }\n}\n\n.style-module_noScrollBars__1ri_E {\n  scrollbar-width: none;\n  /* Firefox */\n  -ms-overflow-style: none;\n  /* Internet Explorer 10+ */\n}\n.style-module_noScrollBars__1ri_E::-webkit-scrollbar {\n  /* WebKit */\n  width: 0;\n  height: 0;\n}\n\n@media (max-width: 34rem) {\n  .style-module_noScrollBarsMobile__1txeg * {\n    scrollbar-width: none;\n    /* Firefox */\n    -ms-overflow-style: none;\n    /* Internet Explorer 10+ */\n  }\n  .style-module_noScrollBarsMobile__1txeg * -webkit-scrollbar {\n    /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.style-module_section__1bf_0 + .style-module_section__1bf_0 {\n  margin-top: 48px;\n}\n@media (min-width: 34rem) {\n  .style-module_section__1bf_0 + .style-module_section__1bf_0 {\n    margin-top: 72px;\n  }\n}\n\n.style-module_overflow-container__oBPQw {\n  width: max-content;\n  min-width: 100%;\n}\n\n.style-module_group-container__2G6Ix {\n  display: flex;\n  flex-flow: column;\n  width: max-content;\n  width: var(--growContent, max-content);\n  margin: auto;\n}\n\n.style-module_group-title__2vvRm {\n  width: 100%;\n  background-color: #fafaff;\n  border-radius: 8px;\n}\n.style-module_group-title__2vvRm > h4 {\n  padding: 24px;\n  display: inline-block;\n}\n\n.style-module_sticky__2Xmbl {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2Xmbl {\n    border-right: 1px solid #fafaff;\n  }\n}\n\n.style-module_header__23SZy {\n  position: sticky;\n  top: 0;\n  top: var(--stickyHeaderTopOffset, 0);\n  z-index: 2;\n  background-color: white;\n}\n.style-module_header__23SZy .style-module_container__xHPlk {\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n}\n.style-module_header__23SZy .style-module_container__xHPlk::-webkit-scrollbar {\n  display: none;\n}\n\n.style-module_show-details-container__1smn4 {\n  width: 100%;\n  border: none;\n}\n\n.style-module_show-details-button__3HR-p {\n  font-family: inherit;\n  background-color: #fafaff;\n  border: none;\n  border-radius: 8px;\n  height: 64px;\n  justify-content: center;\n  align-items: center;\n}\n.style-module_show-details-button__3HR-p svg {\n  margin-left: 8px;\n}\n\n.style-module_icon-inverted__1SnO1 {\n  transform: rotate(180deg);\n  transition: all 0.25s ease;\n}";
+var baseStyles = {"container":"style-module_container__xHPlk","noScrollBars":"style-module_noScrollBars__1ri_E","noScrollBarsMobile":"style-module_noScrollBarsMobile__1txeg","section":"style-module_section__1bf_0","overflow-container":"style-module_overflow-container__oBPQw","group-container":"style-module_group-container__2G6Ix","group-title":"style-module_group-title__2vvRm","sticky":"style-module_sticky__2Xmbl","header":"style-module_header__23SZy","show-details-container":"style-module_show-details-container__1smn4","show-details-button":"style-module_show-details-button__3HR-p","icon-inverted":"style-module_icon-inverted__1SnO1"};
 styleInject(css_248z$4);
 
 var ComparisonTable = function (props) {
     var _a;
-    var headers = props.headers, data = props.data, hideDetails = props.hideDetails, styles = props.styles, hideScrollBars = props.hideScrollBars, collapsibleSections = props.collapsibleSections, cellWidth = props.cellWidth, firstColumnWidth = props.firstColumnWidth, stickyHeaderTopOffset = props.stickyHeaderTopOffset, growContent = props.growContent;
-    var _b = useComparisonTable(), headerWidth = _b.headerWidth, contentContainerRef = _b.contentContainerRef, selectedSection = _b.selectedSection, setSelectedSection = _b.setSelectedSection, selectedTabIndex = _b.selectedTabIndex, scrollContainerCallbackRef = _b.scrollContainerCallbackRef, handleArrowsClick = _b.handleArrowsClick, toggleMoreRows = _b.toggleMoreRows, showMore = _b.showMore, headerId = _b.headerId;
+    var headers = props.headers, data = props.data, hideDetails = props.hideDetails, _b = props.hideDetailsCaption, hideDetailsCaption = _b === void 0 ? 'Hide details' : _b, _c = props.showDetailsCaption, showDetailsCaption = _c === void 0 ? 'Show details' : _c, classNameOverrides = props.classNameOverrides, hideScrollBars = props.hideScrollBars, hideScrollBarsMobile = props.hideScrollBarsMobile, collapsibleSections = props.collapsibleSections, cellWidth = props.cellWidth, firstColumnWidth = props.firstColumnWidth, stickyHeaderTopOffset = props.stickyHeaderTopOffset, growContent = props.growContent, onSelectionChanged = props.onSelectionChanged;
+    var _d = useComparisonTable({ onSelectionChanged: onSelectionChanged }), headerWidth = _d.headerWidth, contentContainerRef = _d.contentContainerRef, selectedSection = _d.selectedSection, setSelectedSection = _d.setSelectedSection, selectedTabIndex = _d.selectedTabIndex, scrollContainerCallbackRef = _d.scrollContainerCallbackRef, handleArrowsClick = _d.handleArrowsClick, toggleMoreRows = _d.toggleMoreRows, showMore = _d.showMore;
     var cssVariablesStyle = __assign(__assign(__assign(__assign({ '--tableWidth': headerWidth + "px" }, (cellWidth ? { '--cellWidth': cellWidth + "px" } : {})), (firstColumnWidth
         ? { '--firstColumnWidth': firstColumnWidth + "px" }
         : {})), (stickyHeaderTopOffset
         ? { '--stickyHeaderTopOffset': stickyHeaderTopOffset + "px" }
         : {})), (growContent ? { '--growContent': '100%' } : {}));
-    return (jsxRuntime.jsx(dist$1.exports.ScrollSync, __assign({ onSync: scrollContainerCallbackRef }, { children: jsxRuntime.jsxs("div", __assign({ style: cssVariablesStyle }, { children: [jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles.header, styles === null || styles === void 0 ? void 0 : styles.header) }, { children: jsxRuntime.jsx(dist$1.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ id: headerId, className: classNames$1(baseStyles.container, (_a = {},
-                                _a[baseStyles.noScrollBars] = hideScrollBars,
-                                _a)) }, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['overflow-container']) }, { children: jsxRuntime.jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [jsxRuntime.jsx(TableArrows, { onClick: handleArrowsClick, active: {
+    return (jsxRuntime.jsx(dist$1.exports.ScrollSync, { children: jsxRuntime.jsxs("div", __assign({ style: cssVariablesStyle, className: classNames$1((_a = {},
+                _a[baseStyles.noScrollBars] = hideScrollBars,
+                _a[baseStyles.noScrollBarsMobile] = hideScrollBarsMobile,
+                _a)) }, { children: [jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles.header, classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.header) }, { children: jsxRuntime.jsx(dist$1.exports.ScrollSyncPane, __assign({ innerRef: scrollContainerCallbackRef }, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles.container) }, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['overflow-container']) }, { children: jsxRuntime.jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [jsxRuntime.jsx(TableArrows, { onClick: handleArrowsClick, active: {
                                                 left: selectedTabIndex > 0,
                                                 right: selectedTabIndex < data.length - 1,
                                             } }, void 0),
-                                        jsxRuntime.jsx(Row$1, { rowId: "table-header-row", cell: headers[0].cells[0], data: data, isRowHeader: true }, "table-header-row")] }), void 0) }), void 0) }), void 0) }, void 0) }), void 0),
+                                        jsxRuntime.jsx(Row$1, { rowId: "table-header-row", cell: headers[0].cells[0], data: data, isRowHeader: true, cellClassName: classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.headerCell }, "table-header-row")] }), void 0) }), void 0) }), void 0) }), void 0) }), void 0),
                 jsxRuntime.jsxs("div", __assign({ ref: contentContainerRef }, { children: [Array.isArray(headers) &&
                             headers
                                 .filter(function (headerGroup) { return !hideDetails || showMore || headerGroup.default; })
@@ -13853,20 +13868,20 @@ var ComparisonTable = function (props) {
                                     /** Do not render the first row */
                                     if (index === 0 && headerGroupIndex === 0)
                                         return null;
-                                    return (jsxRuntime.jsx(Row$1, { rowId: rowId, cell: cell, data: data }, rowId));
+                                    return (jsxRuntime.jsx(Row$1, { rowId: rowId, cell: cell, data: data, cellClassName: classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.cell }, rowId));
                                 });
                                 var idString = "headerGroup-" + headerGroup.id;
-                                return (jsxRuntime.jsx(require$$0.Fragment, { children: headerGroup.label && collapsibleSections ? (jsxRuntime.jsx(AccordionItem, __assign({ className: "mt8", label: headerGroup.label, headerClassName: "p24 br8", isOpen: selectedSection === idString, onOpen: function () { return setSelectedSection(idString); }, onClose: function () { return setSelectedSection(''); } }, { children: jsxRuntime.jsx(dist$1.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles.container, styles === null || styles === void 0 ? void 0 : styles.container, (_a = {},
+                                return (jsxRuntime.jsx(require$$0.Fragment, { children: headerGroup.label && collapsibleSections ? (jsxRuntime.jsx(AccordionItem, __assign({ className: classNames$1('mt16', classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.collapsibleSection), label: headerGroup.label, headerClassName: "p24 br8", isOpen: selectedSection === idString, onOpen: function () { return setSelectedSection(idString); }, onClose: function () { return setSelectedSection(''); } }, { children: jsxRuntime.jsx(dist$1.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles.container, 'pb16', classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.container, (_a = {},
                                                     _a[baseStyles.noScrollBars] = hideScrollBars,
-                                                    _a)) }, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['overflow-container']) }, { children: jsxRuntime.jsx("div", __assign({ className: baseStyles['group-container'] }, { children: content }), void 0) }), void 0) }), void 0) }, void 0) }), void 0)) : (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(dist$1.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles.container, styles === null || styles === void 0 ? void 0 : styles.container, (_b = {},
+                                                    _a)) }, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['overflow-container']) }, { children: jsxRuntime.jsx("div", __assign({ className: baseStyles['group-container'] }, { children: content }), void 0) }), void 0) }), void 0) }, void 0) }), void 0)) : (jsxRuntime.jsx("section", __assign({ className: classNames$1(baseStyles.section, classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.section) }, { children: jsxRuntime.jsx(dist$1.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles.container, 'pb16', classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.container, (_b = {},
                                                     _b[baseStyles.noScrollBars] = hideScrollBars,
                                                     _b)) }, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['overflow-container']) }, { children: jsxRuntime.jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [
                                                             /**
                                                              * Print a table subheader if the `label` value is present
                                                              */
-                                                            headerGroup.label && !collapsibleSections && (jsxRuntime.jsx("div", __assign({ className: baseStyles['group-title'] }, { children: jsxRuntime.jsx("h4", __assign({ className: "p-h4 " + baseStyles.sticky }, { children: headerGroup.label }), void 0) }), void 0)), content] }), void 0) }), void 0) }), void 0) }, void 0) }, idString)) }, idString));
+                                                            headerGroup.label && !collapsibleSections && (jsxRuntime.jsx("div", __assign({ className: baseStyles['group-title'] }, { children: jsxRuntime.jsx("h4", __assign({ className: "p-h4 " + baseStyles.sticky }, { children: headerGroup.label }), void 0) }), void 0)), content] }), void 0) }), void 0) }), void 0) }, void 0) }), idString)) }, idString));
                             }),
-                        hideDetails && (jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['show-details-container'], baseStyles.sticky, 'mt48') }, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("button", __assign({ className: "w100 d-flex p-a p-h4 c-pointer " + baseStyles['show-details-button'], onClick: toggleMoreRows, type: "button" }, { children: [showMore ? 'Hide details' : 'Show details', jsxRuntime.jsx(Chevron, { className: showMore ? '' : baseStyles['icon-inverted'] }, void 0)] }), void 0) }, void 0) }), void 0))] }), void 0)] }), void 0) }), void 0));
+                        hideDetails && (jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['show-details-container'], baseStyles.sticky, 'mt48') }, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("button", __assign({ className: classNames$1('w100 d-flex p-a p-h4 c-pointer', baseStyles['show-details-button'], classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.hideDetailsButton), onClick: toggleMoreRows, type: "button" }, { children: [showMore ? hideDetailsCaption : showDetailsCaption, jsxRuntime.jsx(Chevron, { className: showMore ? '' : baseStyles['icon-inverted'] }, void 0)] }), void 0) }, void 0) }), void 0))] }), void 0)] }), void 0) }, void 0));
 };
 
 var css_248z$3 = ".style-module_background-container__2Gjka {\n  position: relative;\n  display: inline-block;\n  background-color: var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_chip__3rgLT {\n  cursor: pointer;\n  z-index: 2;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.style-module_select-chip-background__YCAyw {\n  position: absolute;\n  background-color: white;\n  border-radius: 8px;\n  top: 8px;\n  z-index: 1;\n  transition: width 0.3s, left 0.3s;\n}";