@popsure/dirty-swan 0.66.21 → 0.66.23

package/dist/cjs/index.js

@@ -21640,7 +21640,7 @@ function requireDist () {
 
 var distExports = requireDist();
 
-var css_248z$o = ".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  border-bottom: 1px solid #e7e7ed;\n  background: white;\n  color: #26262e;\n  column-gap: 16px;\n  cursor: pointer;\n  font-family: inherit;\n  outline: none;\n  padding: 24px 0;\n  position: relative;\n  text-align: inherit;\n  transition: color 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n@media (min-width: 34rem) {\n  .AccordionItem-module_headerButton__1C03u {\n    padding: 24px;\n  }\n}\n.AccordionItem-module_headerButton__1C03u[aria-expanded=true] {\n  border-bottom-color: transparent;\n}\n.AccordionItem-module_headerButton__1C03u:hover {\n  color: #696971;\n}\n.AccordionItem-module_headerButton__1C03u:hover .p-h3 {\n  color: #696971;\n}\n\n.AccordionItem-module_headerButton__1C03u:hover .AccordionItem-module_chevron__1Pdoe {\n  filter: brightness(0.425);\n}";
+var css_248z$o = ".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  border-bottom: 1px solid #e7e7ed;\n  background: white;\n  color: #26262e;\n  column-gap: 16px;\n  cursor: pointer;\n  font-family: inherit;\n  outline: none;\n  padding: 24px 0;\n  position: relative;\n  text-align: inherit;\n  transition: color 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n.AccordionItem-module_headerButton__1C03u[aria-expanded=true] {\n  border-bottom-color: transparent;\n}\n.AccordionItem-module_headerButton__1C03u:hover {\n  color: #696971;\n}\n.AccordionItem-module_headerButton__1C03u:hover .p-h3 {\n  color: #696971;\n}\n\n.AccordionItem-module_headerButton__1C03u:hover .AccordionItem-module_chevron__1Pdoe {\n  filter: brightness(0.425);\n}";
 var styles$n = {"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$o);
 
@@ -21681,7 +21681,7 @@ var Chevron = function (_a) {
     return (jsxRuntime.jsx("svg", { 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: "#26262e", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 
-var css_248z$n = ".style-module_row__3IzmA {\n  border-bottom: 1px solid #e7e7ed;\n}\n.style-module_row__3IzmA:last-child {\n  border-bottom: none;\n}\n\n.style-module_header__32rw- {\n  position: relative;\n}\n.style-module_header__32rw- .style-module_cell__1NoZ6 {\n  align-items: flex-start;\n  justify-content: center;\n  text-align: center;\n}\n@media (min-width: 34rem) {\n  .style-module_header__32rw- .style-module_cell__1NoZ6 {\n    justify-content: flex-start;\n    text-align: left;\n  }\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: flex-start;\n  align-items: center;\n  scroll-snap-align: end;\n  line-height: 24px;\n  padding: 16px 8px;\n}\n.style-module_cell__1NoZ6:first-child {\n  padding: 16px 8px 16px 0;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:first-child {\n    padding: 16px 8px 16px 16px;\n  }\n}\n.style-module_cell__1NoZ6 {\n  color: #26262e;\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 211px;\n    flex: 1 0 var(--cellWidth, 211px);\n    width: 211px;\n    width: var(--cellWidth, 211px);\n  }\n  .style-module_cell__1NoZ6:first-child {\n    padding: 24px 8px 24px 24px;\n  }\n  .style-module_cell__1NoZ6 {\n    padding: 24px 8px;\n  }\n}\n\nh4.style-module_cell__1NoZ6 {\n  max-width: min(212px, var(--tableWidth) / 2);\n  max-width: min(var(--firstColumnWidth, 212px), var(--tableWidth) / 2);\n}\n\n.style-module_title__1xYvu {\n  position: relative;\n  color: #26262e;\n  display: none;\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    flex: 1 0 288px;\n  }\n}\n\nh4.style-module_addon__CPf60 {\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 css_248z$n = ".style-module_row__3IzmA {\n  border-bottom: 1px solid #e7e7ed;\n}\n.style-module_row__3IzmA:last-child {\n  border-bottom: none;\n}\n\n.style-module_header__32rw- {\n  position: relative;\n}\n.style-module_header__32rw- .style-module_cell__1NoZ6 {\n  align-items: flex-start;\n  justify-content: center;\n  text-align: center;\n}\n@media (min-width: 34rem) {\n  .style-module_header__32rw- .style-module_cell__1NoZ6 {\n    justify-content: flex-start;\n    text-align: left;\n  }\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: flex-start;\n  align-items: center;\n  scroll-snap-align: end;\n  line-height: 24px;\n  padding: 16px 8px;\n}\n.style-module_cell__1NoZ6:first-child {\n  padding: 16px 8px 16px 0;\n}\n.style-module_cell__1NoZ6 {\n  color: #26262e;\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 211px;\n    flex: 1 0 var(--cellWidth, 211px);\n    width: 211px;\n    width: var(--cellWidth, 211px);\n  }\n  .style-module_cell__1NoZ6:first-child {\n    padding: 24px 8px 24px 0;\n  }\n  .style-module_cell__1NoZ6 {\n    padding: 24px 8px;\n  }\n}\n\nh4.style-module_cell__1NoZ6 {\n  max-width: min(212px, var(--tableWidth) / 2);\n  max-width: min(var(--firstColumnWidth, 212px), var(--tableWidth) / 2);\n}\n\n.style-module_title__1xYvu {\n  position: relative;\n  color: #26262e;\n  display: none;\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    flex: 1 0 288px;\n  }\n}\n\nh4.style-module_addon__CPf60 {\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$m = {"row":"style-module_row__3IzmA","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$n);
 
@@ -22625,8 +22625,8 @@ var Accordion = function (_a) {
         }) }));
 };
 
-var css_248z$b = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n  padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_navigationTitle__2FiRB {\n  padding-left: 0;\n}\n\n.TableCell-module_headerCell__aVTIn {\n  vertical-align: top;\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n  padding-left: 0;\n}\n\n.TableCell-module_selectedColumnTop__1GcJz {\n  border-radius: 16px 16px 0 0;\n}\n\n.TableCell-module_selectedColumnBottom__qiMke {\n  border-radius: 0 0 16px 16px;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
-var styles$b = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","navigationTitle":"TableCell-module_navigationTitle__2FiRB","headerCell":"TableCell-module_headerCell__aVTIn","fixedCell":"TableCell-module_fixedCell__cL3-m","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
+var css_248z$b = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n  padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_navigationTitle__2FiRB {\n  padding-left: 0;\n}\n\n.TableCell-module_headerCell__aVTIn {\n  vertical-align: top;\n}\n\n.TableCell-module_subtitleCell__1DzfG {\n  vertical-align: middle;\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n  padding-left: 0;\n}\n\n.TableCell-module_selectedColumnTop__1GcJz {\n  border-radius: 16px 16px 0 0;\n}\n\n.TableCell-module_selectedColumnBottom__qiMke {\n  border-radius: 0 0 16px 16px;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
+var styles$b = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","navigationTitle":"TableCell-module_navigationTitle__2FiRB","headerCell":"TableCell-module_headerCell__aVTIn","subtitleCell":"TableCell-module_subtitleCell__1DzfG","fixedCell":"TableCell-module_fixedCell__cL3-m","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
 styleInject(css_248z$b);
 
 var css_248z$a = "@media (max-width: 34rem) {\n  .BaseCell-module_maxWidth__14Cly {\n    max-width: calc(100% - 64px);\n  }\n}\n\n.BaseCell-module_icon__1775U {\n  margin: 2px;\n}\n\n.BaseCell-module_description__3_kfe {\n  word-break: break-word;\n}";
@@ -22671,7 +22671,7 @@ var BaseCell = function (_a) {
             'jc-center': align === 'center',
         }), children: jsxRuntime.jsxs("div", { className: classNames('d-flex fd-column', alignClassName, (_b = {},
                 _b[styles$a.maxWidth] = modalContent && align === 'center',
-                _b)), children: [jsxRuntime.jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsxRuntime.jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsxRuntime.jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'neutral-900' : 'neutral-400', className: styles$a.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsxRuntime.jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsxRuntime.jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "neutral-900" })) : (jsxRuntime.jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "neutral-500" })) })), jsxRuntime.jsxs("div", { className: "d-flex ai-center", children: [text && fontVariant === 'NORMAL' && (jsxRuntime.jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsxRuntime.jsx("div", { className: "p-h2 tc-neutral-900", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'TITLE' && (jsxRuntime.jsx("h2", { "aria-hidden": true, className: "tc-grey-800 p-h2 p--serif", children: text })), modalContent && openModal && (jsxRuntime.jsx("span", { className: "ml8", children: jsxRuntime.jsx(TableInfoButton, { onClick: function () {
+                _b)), children: [jsxRuntime.jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsxRuntime.jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsxRuntime.jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'neutral-900' : 'neutral-400', className: styles$a.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsxRuntime.jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsxRuntime.jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "neutral-900" })) : (jsxRuntime.jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "neutral-500" })) })), jsxRuntime.jsxs("div", { className: "d-flex ai-center", children: [text && fontVariant === 'NORMAL' && (jsxRuntime.jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsxRuntime.jsx("div", { className: "p-h2 tc-neutral-900", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'TITLE' && (jsxRuntime.jsx("h2", { "aria-hidden": true, className: "tc-grey-800 p-h2 p--serif", children: text })), text && fontVariant === 'SUBTITLE' && (jsxRuntime.jsx("h2", { "aria-hidden": true, className: "tc-grey-800 p-h4", children: text })), modalContent && openModal && (jsxRuntime.jsx("span", { className: "ml8", children: jsxRuntime.jsx(TableInfoButton, { onClick: function () {
                                             return openModal({
                                                 title: modalTitle,
                                                 body: modalContent,
@@ -22748,15 +22748,14 @@ var TableCell = React.memo(function (_a) {
                 'ta-left': isFirstCellInRow
             },
             _b[styles$b.headerCell] = isHeader,
+            _b[styles$b.subtitleCell] = !cellProps.type && cellProps.fontVariant === 'SUBTITLE',
             _b[styles$b.thNavigation] = isNavigation,
             _b[styles$b.navigationTitle] = isNavigation && isTopLeftCell,
             _b[styles$b.fixedCell] = isFirstCellInRow && colSpan < 1,
             _b[styles$b.fixedCard] = cellProps.type === 'CARD',
             _b[styles$b.selectedColumnTop] = selectedColumnPosition === 'top',
             _b[styles$b.selectedColumnBottom] = selectedColumnPosition === 'bottom',
-            _b)), colSpan: isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan, children: [!cellProps.type && (jsxRuntime.jsx(BaseCell, __assign({}, cellProps, { fontVariant: isTopLeftCell
-                    ? 'TITLE'
-                    : (_c = cellProps.fontVariant) !== null && _c !== void 0 ? _c : 'NORMAL' }))), cellProps.type === 'CTA' && (jsxRuntime.jsx(CTACell, __assign({}, cellProps, { centered: isNavigation }))), cellProps.type === 'BUTTON' && jsxRuntime.jsx(ButtonCell, __assign({}, cellProps)), cellProps.type === 'CARD' && jsxRuntime.jsx(CardCell, __assign({}, cellProps))] })));
+            _b)), colSpan: isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan, children: [!cellProps.type && (jsxRuntime.jsx(BaseCell, __assign({}, cellProps, { fontVariant: (_c = cellProps.fontVariant) !== null && _c !== void 0 ? _c : (isTopLeftCell ? 'TITLE' : 'NORMAL') }))), cellProps.type === 'CTA' && (jsxRuntime.jsx(CTACell, __assign({}, cellProps, { centered: isNavigation }))), cellProps.type === 'BUTTON' && jsxRuntime.jsx(ButtonCell, __assign({}, cellProps)), cellProps.type === 'CARD' && jsxRuntime.jsx(CardCell, __assign({}, cellProps))] })));
 });
 
 var css_248z$6 = ".Table-module_wrapper__2MMNq {\n  position: relative;\n  border: 1px solid #f2f2f8;\n  border-radius: 12px;\n  padding: 24px;\n}\n\n.Table-module_container__3VFLP {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n.Table-module_container__3VFLP::-webkit-scrollbar {\n  display: none;\n}\n@media (min-width: 34rem) {\n  .Table-module_container__3VFLP {\n    scroll-snap-type: unset;\n  }\n}\n\n.Table-module_cardButton__3aMuL div {\n  background-color: #FAF8F5;\n}\n.Table-module_cardButton__3aMuL:hover div {\n  border-color: transparent !important;\n  outline-color: transparent !important;\n  box-shadow: none !important;\n  background-color: #FCF7EF !important;\n}\n.Table-module_cardButton__3aMuL:focus-visible div {\n  background-color: #FCF7EF !important;\n}\n\n.Table-module_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n}\n\n@media (max-width: 34rem) {\n  .Table-module_modalContent__1PNgv {\n    min-width: initial;\n  }\n}";
@@ -22856,6 +22855,18 @@ var css_248z$3 = ".Collapsible-module_collapsible__2wWKs {\n  display: flow-root
 var styles$3 = {"collapsible":"Collapsible-module_collapsible__2wWKs"};
 styleInject(css_248z$3);
 
+var measureHeight = function (element) {
+    var height = 0;
+    for (var _i = 0, _a = Array.from(element.children); _i < _a.length; _i++) {
+        var child = _a[_i];
+        var childStyles = getComputedStyle(child);
+        height +=
+            child.getBoundingClientRect().height +
+                (parseFloat(childStyles.marginTop) || 0) +
+                (parseFloat(childStyles.marginBottom) || 0);
+    }
+    return Math.ceil(height);
+};
 var Collapsible = function (_a) {
     var _b;
     var children = _a.children, isExpanded = _a.isExpanded, onTransitionEnd = _a.onTransitionEnd;
@@ -22864,24 +22875,23 @@ var Collapsible = function (_a) {
     var containerRef = React.useRef(null);
     React.useEffect(function () {
         if (!observerRef.current) {
-            observerRef.current = new ResizeObserver(function (entries) {
-                entries.forEach(function (entry) {
-                    var scrollheight = entry.target.scrollHeight;
-                    setHeight(scrollheight);
-                });
+            observerRef.current = new ResizeObserver(function () {
+                if (containerRef.current) {
+                    setHeight(measureHeight(containerRef.current));
+                }
             });
         }
         if (containerRef.current) {
             observerRef.current.observe(containerRef.current);
-            var scrollheight = containerRef.current.scrollHeight;
-            setHeight(scrollheight);
+            Array.from(containerRef.current.children).forEach(function (child) {
+                var _a;
+                (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.observe(child);
+            });
+            setHeight(measureHeight(containerRef.current));
         }
         return function () {
-            var _a, _b;
-            if (containerRef.current) {
-                (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(containerRef.current);
-            }
-            (_b = observerRef.current) === null || _b === void 0 ? void 0 : _b.disconnect();
+            var _a;
+            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
         };
     }, [containerRef.current]);
     return (jsxRuntime.jsx("div", { className: classNames(styles$3.collapsible, (_b = {},