@qoretechnologies/reqore 0.76.0-pr.673.g960750c → 0.76.0

package/dist/components/Panel/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,6 +14,39 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -24,41 +58,47 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { isArray, omit, size } from 'lodash';
-import { darken, rgba } from 'polished';
-import { Resizable } from 're-resizable';
-import { forwardRef, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { createPortal } from 'react-dom';
-import { useMeasure, useUpdateEffect } from 'react-use';
-import styled, { css } from 'styled-components';
-import { CONTROL_ICON_OPACITY } from '../../constants/colors.js';
-import { ACCENT_SIZE_TO_PX, GAP_FROM_SIZE, HEADER_LEVEL_TO_PX, HEADER_SIZE_TO_NUMBER, ICON_FROM_HEADER_SIZE, PADDING_FROM_SIZE, resolveRadius, SPECIAL_PADDING_FROM_SIZE, TEXT_FROM_SIZE, } from '../../constants/sizes.js';
-import { changeDarkness, changeLightness, getMainBackgroundColor, getReadableColor, } from '../../helpers/colors.js';
-import { omitStyleProps } from '../../helpers/styled.js';
-import { getOneHigherSize, isActionShown, resolveAccentSize } from '../../helpers/utils.js';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
-import { useReqoreProperty } from '../../hooks/useReqoreContext.js';
-import { FIT_TEXT_FLOOR_PX, useFitTextSize } from '../../hooks/useFitTextSize.js';
-import { useReqoreTheme } from '../../hooks/useTheme.js';
-import { ACTIVE_ICON_SCALE, DisabledElement, INACTIVE_ICON_SCALE, RaisedElement, } from '../../styles.js';
-import ReqoreBreadcrumbs from '../Breadcrumbs/index.js';
-import ReqoreButton, { ButtonBadge } from '../Button/index.js';
-import { StyledCollectionItemContent } from '../Collection/item.js';
-import ReqoreControlGroup from '../ControlGroup/index.js';
-import ReqoreDropdown from '../Dropdown/index.js';
-import { getPrimaryGradient, patchPrimaryGradient, StyledEffect, } from '../Effect/index.js';
-import { ReqoreErrorBoundary } from '../ErrorBoundary/index.js';
-import ReqoreIcon from '../Icon/index.js';
-import { ReqoreSkeleton } from '../Skeleton/index.js';
-import { ReqoreSpan } from '../Span/index.js';
-import { ReqoreTooltipComponent } from '../TooltipComponent/index.js';
-import { LabelEditor } from './LabelEditor.js';
-import { ReqorePanelNonResponsiveActions } from './NonResponsiveActions.js';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReqorePanel = exports.ReqorePanelSkeleton = exports.StyledFloatingActions = exports.StyledPanelContent = exports.StyledPanelBottomActions = exports.StyledPanelTopBar = exports.StyledPanelTitle = exports.StyledPanel = exports.StyledPanelTitleHeaderLabelAndBadge = exports.StyledPanelTitleHeaderLabelAndDescription = exports.StyledPanelTitleHeaderContent = exports.StyledPanelTitleHeader = void 0;
+var react_1 = require("react");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var classnames_1 = __importDefault(require("classnames"));
+var lodash_1 = require("lodash");
+var polished_1 = require("polished");
+var re_resizable_1 = require("re-resizable");
+var react_2 = require("react");
+var react_dom_1 = require("react-dom");
+var react_use_1 = require("react-use");
+var responsive_1 = require("./responsive");
+var styled_components_1 = __importStar(require("styled-components"));
+var colors_1 = require("../../constants/colors");
+var sizes_1 = require("../../constants/sizes");
+var colors_2 = require("../../helpers/colors");
+var styled_1 = require("../../helpers/styled");
+var utils_1 = require("../../helpers/utils");
+var useCombinedRefs_1 = require("../../hooks/useCombinedRefs");
+var useReqoreContext_1 = require("../../hooks/useReqoreContext");
+var useFitTextSize_1 = require("../../hooks/useFitTextSize");
+var useTheme_1 = require("../../hooks/useTheme");
+var styles_1 = require("../../styles");
+var Breadcrumbs_1 = __importDefault(require("../Breadcrumbs"));
+var Button_1 = __importStar(require("../Button"));
+var item_1 = require("../Collection/item");
+var ControlGroup_1 = __importDefault(require("../ControlGroup"));
+var Dropdown_1 = __importDefault(require("../Dropdown"));
+var Effect_1 = require("../Effect");
+var ErrorBoundary_1 = require("../ErrorBoundary");
+var Icon_1 = __importDefault(require("../Icon"));
+var Skeleton_1 = require("../Skeleton");
+var Span_1 = require("../Span");
+var TooltipComponent_1 = require("../TooltipComponent");
+var LabelEditor_1 = require("./LabelEditor");
+var NonResponsiveActions_1 = require("./NonResponsiveActions");
 var getPaddingSize = function (padded, size) {
-    return typeof padded === 'string' ? SPECIAL_PADDING_FROM_SIZE[padded] : PADDING_FROM_SIZE[size];
+    return typeof padded === 'string' ? sizes_1.SPECIAL_PADDING_FROM_SIZE[padded] : sizes_1.PADDING_FROM_SIZE[size];
 };
 /** Nearest scrollable ancestor of `node` (the element a `position: sticky`
  *  header actually pins to), or `null` for the viewport. Used to scope the
@@ -105,20 +145,20 @@ var getScrollportInset = function (el) {
  * opening a line box around the inline-flex heading — a block wrapper adds the row's leading on
  * top of the heading's own box, which made a `tiny` panel 3px taller than it used to be.
  */
-var StyledPanelTitleLabelBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"], ["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"])), function (_a) {
+var StyledPanelTitleLabelBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"], ["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"])), function (_a) {
     var $clampLines = _a.$clampLines;
-    return $clampLines > 1 && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      .reqore-heading {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        /* A single word longer than the box would push past it rather than break, and the\n           clamp would have nothing to ellipsize. */\n        overflow-wrap: anywhere;\n        max-width: 100%;\n\n        /* The heading wraps its text in a span of its own, and `-webkit-line-clamp` counts the\n           box's CHILDREN rather than the lines inside them \u2014 so one block-level child reads as\n           a single line and nothing is ever clamped, however far the text overruns. Putting the\n           text back into the heading's own line boxes is what the clamp actually measures. */\n        .reqore-span {\n          display: inline;\n        }\n      }\n    "], ["\n      .reqore-heading {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        /* A single word longer than the box would push past it rather than break, and the\n           clamp would have nothing to ellipsize. */\n        overflow-wrap: anywhere;\n        max-width: 100%;\n\n        /* The heading wraps its text in a span of its own, and \\`-webkit-line-clamp\\` counts the\n           box's CHILDREN rather than the lines inside them \u2014 so one block-level child reads as\n           a single line and nothing is ever clamped, however far the text overruns. Putting the\n           text back into the heading's own line boxes is what the clamp actually measures. */\n        .reqore-span {\n          display: inline;\n        }\n      }\n    "])), $clampLines);
+    return $clampLines > 1 && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      .reqore-heading {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        /* A single word longer than the box would push past it rather than break, and the\n           clamp would have nothing to ellipsize. */\n        overflow-wrap: anywhere;\n        max-width: 100%;\n\n        /* The heading wraps its text in a span of its own, and `-webkit-line-clamp` counts the\n           box's CHILDREN rather than the lines inside them \u2014 so one block-level child reads as\n           a single line and nothing is ever clamped, however far the text overruns. Putting the\n           text back into the heading's own line boxes is what the clamp actually measures. */\n        .reqore-span {\n          display: inline;\n        }\n      }\n    "], ["\n      .reqore-heading {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        /* A single word longer than the box would push past it rather than break, and the\n           clamp would have nothing to ellipsize. */\n        overflow-wrap: anywhere;\n        max-width: 100%;\n\n        /* The heading wraps its text in a span of its own, and \\`-webkit-line-clamp\\` counts the\n           box's CHILDREN rather than the lines inside them \u2014 so one block-level child reads as\n           a single line and nothing is ever clamped, however far the text overruns. Putting the\n           text back into the heading's own line boxes is what the clamp actually measures. */\n        .reqore-span {\n          display: inline;\n        }\n      }\n    "])), $clampLines);
 });
-export var StyledPanelTitleHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"], ["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"])));
-export var StyledPanelTitleHeaderContent = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"], ["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"])), function (_a) {
+exports.StyledPanelTitleHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"], ["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"])));
+exports.StyledPanelTitleHeaderContent = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"], ["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"])), function (_a) {
     var $hasOuterIcon = _a.$hasOuterIcon;
     return ($hasOuterIcon ? 'grid' : 'flex');
 }, function (_a) {
     var $hasOuterIcon = _a.$hasOuterIcon, size = _a.size, _b = _a.$iconVerticalAlign, $iconVerticalAlign = _b === void 0 ? 'center' : _b, $hasDescription = _a.$hasDescription;
     return $hasOuterIcon
-        ? css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          // 'auto' lets the column grow to the icon's actual rendered size \u2014\n          // important when consumers pass a custom 'iconProps.size' that does\n          // not match the default size derived from 'panelSize'/'labelSize'.\n          // 'iconSize' is still passed via 'min-width' below to ensure a\n          // sensible minimum reservation when the row is otherwise empty.\n          grid-template-columns: auto minmax(0, 1fr);\n          grid-template-rows: ", ";\n          column-gap: ", "px;\n          row-gap: 3px;\n          align-items: start;\n\n          & > .reqore-panel-title-icon {\n            ", "\n            grid-column: 1;\n            align-self: center;\n            justify-self: start;\n            // Suppress 'vertical-align: super' that ReqoreIcon applies to its\n            // SVG for inline-text contexts. In our grid layout the wrapper is\n            // already vertically centred against the text row's line-box;\n            // 'display: block' takes the SVG out of inline flow entirely so\n            // baseline/super offsets cannot push it off-centre. The wrapper's\n            // own 'align-items: center' then centres the SVG within itself.\n            & svg {\n              display: block;\n              vertical-align: middle;\n            }\n          }\n\n          & > .reqore-panel-title-label-row {\n            grid-column: 2;\n            grid-row: 1;\n            min-width: 0;\n          }\n\n          & > .reqore-panel-title-description {\n            grid-column: 2;\n            grid-row: 2;\n            min-width: 0;\n          }\n        "], ["\n          // 'auto' lets the column grow to the icon's actual rendered size \u2014\n          // important when consumers pass a custom 'iconProps.size' that does\n          // not match the default size derived from 'panelSize'/'labelSize'.\n          // 'iconSize' is still passed via 'min-width' below to ensure a\n          // sensible minimum reservation when the row is otherwise empty.\n          grid-template-columns: auto minmax(0, 1fr);\n          grid-template-rows: ", ";\n          column-gap: ", "px;\n          row-gap: 3px;\n          align-items: start;\n\n          & > .reqore-panel-title-icon {\n            ", "\n            grid-column: 1;\n            align-self: center;\n            justify-self: start;\n            // Suppress 'vertical-align: super' that ReqoreIcon applies to its\n            // SVG for inline-text contexts. In our grid layout the wrapper is\n            // already vertically centred against the text row's line-box;\n            // 'display: block' takes the SVG out of inline flow entirely so\n            // baseline/super offsets cannot push it off-centre. The wrapper's\n            // own 'align-items: center' then centres the SVG within itself.\n            & svg {\n              display: block;\n              vertical-align: middle;\n            }\n          }\n\n          & > .reqore-panel-title-label-row {\n            grid-column: 2;\n            grid-row: 1;\n            min-width: 0;\n          }\n\n          & > .reqore-panel-title-description {\n            grid-column: 2;\n            grid-row: 2;\n            min-width: 0;\n          }\n        "])), $hasDescription ? 'auto auto' : 'auto', PADDING_FROM_SIZE[size || 'normal'], $iconVerticalAlign === 'top'
-            ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  grid-row: 1;\n                "], ["\n                  grid-row: 1;\n                "]))) : $iconVerticalAlign === 'bottom' && $hasDescription
-            ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  grid-row: 2;\n                "], ["\n                  grid-row: 2;\n                "]))) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                  grid-row: 1 / ", ";\n                "], ["\n                  grid-row: 1 / ", ";\n                "])), $hasDescription ? 3 : 2)) : css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          justify-content: flex-start;\n          align-items: center;\n        "], ["\n          justify-content: flex-start;\n          align-items: center;\n        "])));
+        ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          // 'auto' lets the column grow to the icon's actual rendered size \u2014\n          // important when consumers pass a custom 'iconProps.size' that does\n          // not match the default size derived from 'panelSize'/'labelSize'.\n          // 'iconSize' is still passed via 'min-width' below to ensure a\n          // sensible minimum reservation when the row is otherwise empty.\n          grid-template-columns: auto minmax(0, 1fr);\n          grid-template-rows: ", ";\n          column-gap: ", "px;\n          row-gap: 3px;\n          align-items: start;\n\n          & > .reqore-panel-title-icon {\n            ", "\n            grid-column: 1;\n            align-self: center;\n            justify-self: start;\n            // Suppress 'vertical-align: super' that ReqoreIcon applies to its\n            // SVG for inline-text contexts. In our grid layout the wrapper is\n            // already vertically centred against the text row's line-box;\n            // 'display: block' takes the SVG out of inline flow entirely so\n            // baseline/super offsets cannot push it off-centre. The wrapper's\n            // own 'align-items: center' then centres the SVG within itself.\n            & svg {\n              display: block;\n              vertical-align: middle;\n            }\n          }\n\n          & > .reqore-panel-title-label-row {\n            grid-column: 2;\n            grid-row: 1;\n            min-width: 0;\n          }\n\n          & > .reqore-panel-title-description {\n            grid-column: 2;\n            grid-row: 2;\n            min-width: 0;\n          }\n        "], ["\n          // 'auto' lets the column grow to the icon's actual rendered size \u2014\n          // important when consumers pass a custom 'iconProps.size' that does\n          // not match the default size derived from 'panelSize'/'labelSize'.\n          // 'iconSize' is still passed via 'min-width' below to ensure a\n          // sensible minimum reservation when the row is otherwise empty.\n          grid-template-columns: auto minmax(0, 1fr);\n          grid-template-rows: ", ";\n          column-gap: ", "px;\n          row-gap: 3px;\n          align-items: start;\n\n          & > .reqore-panel-title-icon {\n            ", "\n            grid-column: 1;\n            align-self: center;\n            justify-self: start;\n            // Suppress 'vertical-align: super' that ReqoreIcon applies to its\n            // SVG for inline-text contexts. In our grid layout the wrapper is\n            // already vertically centred against the text row's line-box;\n            // 'display: block' takes the SVG out of inline flow entirely so\n            // baseline/super offsets cannot push it off-centre. The wrapper's\n            // own 'align-items: center' then centres the SVG within itself.\n            & svg {\n              display: block;\n              vertical-align: middle;\n            }\n          }\n\n          & > .reqore-panel-title-label-row {\n            grid-column: 2;\n            grid-row: 1;\n            min-width: 0;\n          }\n\n          & > .reqore-panel-title-description {\n            grid-column: 2;\n            grid-row: 2;\n            min-width: 0;\n          }\n        "])), $hasDescription ? 'auto auto' : 'auto', sizes_1.PADDING_FROM_SIZE[size || 'normal'], $iconVerticalAlign === 'top'
+            ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    grid-row: 1;\n                  "], ["\n                    grid-row: 1;\n                  "]))) : $iconVerticalAlign === 'bottom' && $hasDescription
+            ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                      grid-row: 2;\n                    "], ["\n                      grid-row: 2;\n                    "]))) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                      grid-row: 1 / ", ";\n                    "], ["\n                      grid-row: 1 / ", ";\n                    "])), $hasDescription ? 3 : 2)) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          justify-content: flex-start;\n          align-items: center;\n        "], ["\n          justify-content: flex-start;\n          align-items: center;\n        "])));
 }, function (_a) {
     var iconSize = _a.iconSize, hasIcon = _a.hasIcon;
     var width = 0;
@@ -127,8 +167,8 @@ export var StyledPanelTitleHeaderContent = styled.div(templateObject_9 || (templ
     }
     return width;
 });
-export var StyledPanelTitleHeaderLabelAndDescription = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"])));
-export var StyledPanelTitleHeaderLabelAndBadge = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"])));
+exports.StyledPanelTitleHeaderLabelAndDescription = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"])));
+exports.StyledPanelTitleHeaderLabelAndBadge = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"])));
 /**
  * Does the panel wrapper draw its 1px border?
  *
@@ -149,32 +189,32 @@ var hasPanelBorder = function (_a) {
  *  the intent belongs to the strip, so the border falls back to the neutral surface colour. */
 var getPanelBorderBaseColor = function (theme, _a) {
     var intent = _a.intent, accentPosition = _a.accentPosition;
-    return (intent && !accentPosition ? theme.intents[intent] : getMainBackgroundColor(theme));
+    return (intent && !accentPosition ? theme.intents[intent] : (0, colors_2.getMainBackgroundColor)(theme));
 };
-export var StyledPanel = styled(StyledEffect).withConfig({
+exports.StyledPanel = (0, styled_components_1.default)(Effect_1.StyledEffect).withConfig({
     // `fill` controls panel layout and must not become a boolean DOM attribute. Neither must
     // `accentPosition`: when the panel renders as a `Resizable` (a COMPONENT target) the rule
     // below forwards everything, and re-resizable spreads the leftovers onto its wrapper div.
     // Filtering here still leaves the styled-component's own interpolations reading the prop.
     // Everything else follows styled-components' own rule, so re-resizable still receives its
     // `enable` / size / handle config — those are component props, not HTML attributes.
-    shouldForwardProp: omitStyleProps('fill', 'accentPosition'),
+    shouldForwardProp: (0, styled_1.omitStyleProps)('fill', 'accentPosition'),
 })(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", "px;\n  border: ", ";\n  color: ", ";\n  ", "\n  overflow: ", ";\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  backdrop-filter: ", ";\n  width: ", ";\n  max-width: 100%;\n  flex: ", ";\n\n  /* Hover-hiding applies ONLY where the pointer can hover. A touch device never\n     fires :hover, so without this gate a `show: 'hover'` action is display:none\n     forever \u2014 not merely invisible but absent from the layout, with nothing on\n     screen hinting it exists. Where hover is unavailable the action stays\n     visible; losing the tidiness beats losing the action. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-panel-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &.reqore-panel-floating-active {\n    border-top-right-radius: 0;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", "px;\n  border: ", ";\n  color: ", ";\n  ", "\n  overflow: ", ";\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  backdrop-filter: ", ";\n  width: ", ";\n  max-width: 100%;\n  flex: ", ";\n\n  /* Hover-hiding applies ONLY where the pointer can hover. A touch device never\n     fires :hover, so without this gate a \\`show: 'hover'\\` action is display:none\n     forever \u2014 not merely invisible but absent from the layout, with nothing on\n     screen hinting it exists. Where hover is unavailable the action stays\n     visible; losing the tidiness beats losing the action. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-panel-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &.reqore-panel-floating-active {\n    border-top-right-radius: 0;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
-    return rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity);
+    return (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity);
 }, function (_a) {
     var rounded = _a.rounded, radiusSize = _a.radiusSize;
-    return rounded ? resolveRadius('normal', radiusSize) : 0;
+    return rounded ? (0, sizes_1.resolveRadius)('normal', radiusSize) : 0;
 }, function (_a) {
     var theme = _a.theme, flat = _a.flat, intent = _a.intent, accentPosition = _a.accentPosition;
     return hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition })
-        ? "1px solid ".concat(changeLightness(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.08))
+        ? "1px solid ".concat((0, colors_2.changeLightness)(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.08))
         : undefined;
 }, function (_a) {
     var theme = _a.theme;
-    return getReadableColor(theme, undefined, undefined, true);
+    return (0, colors_2.getReadableColor)(theme, undefined, undefined, true);
 }, function (_a) {
-    var accentPosition = _a.accentPosition, _b = _a.$accentSize, $accentSize = _b === void 0 ? ACCENT_SIZE_TO_PX.normal : _b, theme = _a.theme, intent = _a.intent, flat = _a.flat, rounded = _a.rounded, radiusSize = _a.radiusSize, stickyHeader = _a.stickyHeader;
+    var accentPosition = _a.accentPosition, _b = _a.$accentSize, $accentSize = _b === void 0 ? sizes_1.ACCENT_SIZE_TO_PX.normal : _b, theme = _a.theme, intent = _a.intent, flat = _a.flat, rounded = _a.rounded, radiusSize = _a.radiusSize, stickyHeader = _a.stickyHeader;
     if (!accentPosition) {
         return undefined;
     }
@@ -191,16 +231,14 @@ export var StyledPanel = styled(StyledEffect).withConfig({
     // The strip sits in the padding box, inside any border, so inset by the border width to
     // land on the wrapper's INNER curve — the same adjustment StyledPanelTopBar makes.
     var stripRadius = stickyHeader && rounded
-        ? Math.max(0, resolveRadius('normal', radiusSize) -
+        ? Math.max(0, (0, sizes_1.resolveRadius)('normal', radiusSize) -
             (hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition }) ? 1 : 0))
         : 0;
-    return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      position: relative;\n      /* Reserve the strip's thickness so the title bar and content never sit\n         under it \u2014 the same reservation ReqoreCallout makes. */\n      padding-", ": ", "px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        ", "\n        ", "\n        background-color: ", ";\n      }\n    "], ["\n      position: relative;\n      /* Reserve the strip's thickness so the title bar and content never sit\n         under it \u2014 the same reservation ReqoreCallout makes. */\n      padding-", ": ", "px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        ", "\n        ", "\n        background-color: ", ";\n      }\n    "])), accentPosition === 'left' ? 'left' : 'top', $accentSize, accentPosition === 'left'
-        ? css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n              top: 0;\n              bottom: 0;\n              left: 0;\n              width: ", "px;\n            "], ["\n              top: 0;\n              bottom: 0;\n              left: 0;\n              width: ", "px;\n            "])), $accentSize) : css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n              top: 0;\n              right: 0;\n              left: 0;\n              height: ", "px;\n            "], ["\n              top: 0;\n              right: 0;\n              left: 0;\n              height: ", "px;\n            "])), $accentSize), stripRadius
+    return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      position: relative;\n      /* Reserve the strip's thickness so the title bar and content never sit\n         under it \u2014 the same reservation ReqoreCallout makes. */\n      padding-", ": ", "px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        ", "\n        ", "\n        background-color: ", ";\n      }\n    "], ["\n      position: relative;\n      /* Reserve the strip's thickness so the title bar and content never sit\n         under it \u2014 the same reservation ReqoreCallout makes. */\n      padding-", ": ", "px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        ", "\n        ", "\n        background-color: ", ";\n      }\n    "])), accentPosition === 'left' ? 'left' : 'top', $accentSize, accentPosition === 'left'
+        ? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                top: 0;\n                bottom: 0;\n                left: 0;\n                width: ", "px;\n              "], ["\n                top: 0;\n                bottom: 0;\n                left: 0;\n                width: ", "px;\n              "])), $accentSize) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                top: 0;\n                right: 0;\n                left: 0;\n                height: ", "px;\n              "], ["\n                top: 0;\n                right: 0;\n                left: 0;\n                height: ", "px;\n              "])), $accentSize), stripRadius
         ? accentPosition === 'left'
-            ? css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              "], ["\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              "])), stripRadius, stripRadius) : css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n                border-top-left-radius: ", "px;\n                border-top-right-radius: ", "px;\n              "], ["\n                border-top-left-radius: ", "px;\n                border-top-right-radius: ", "px;\n              "])), stripRadius, stripRadius)
-        : undefined, intent
-        ? theme.intents[intent]
-        : changeLightness(getMainBackgroundColor(theme), 0.22));
+            ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n                  border-top-left-radius: ", "px;\n                  border-bottom-left-radius: ", "px;\n                "], ["\n                  border-top-left-radius: ", "px;\n                  border-bottom-left-radius: ", "px;\n                "])), stripRadius, stripRadius) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n                  border-top-left-radius: ", "px;\n                  border-top-right-radius: ", "px;\n                "], ["\n                  border-top-left-radius: ", "px;\n                  border-top-right-radius: ", "px;\n                "])), stripRadius, stripRadius)
+        : undefined, intent ? theme.intents[intent] : (0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.22));
 }, function (_a) {
     var stickyHeader = _a.stickyHeader;
     return (stickyHeader ? 'visible' : 'hidden');
@@ -216,53 +254,53 @@ export var StyledPanel = styled(StyledEffect).withConfig({
 }, function (_a) {
     var interactive = _a.interactive, theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b, flat = _a.flat, intent = _a.intent, accentPosition = _a.accentPosition;
     return interactive
-        ? css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n          cursor: pointer;\n\n          &:hover {\n            ", " ", " .reqore-panel-title-icon {\n              transform: scale(", ");\n            }\n\n            background-color: ", ";\n\n            border-color: ", ";\n\n            ", "\n          }\n        "], ["\n          cursor: pointer;\n\n          &:hover {\n            ", " ", " .reqore-panel-title-icon {\n              transform: scale(", ");\n            }\n\n            background-color: ", ";\n\n            border-color: ", ";\n\n            ", "\n          }\n        "])), StyledPanelTitle, StyledPanelTitleHeaderContent, ACTIVE_ICON_SCALE, opacity === 0 && flat
+        ? (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n          cursor: pointer;\n\n          &:hover {\n            ", " ", " .reqore-panel-title-icon {\n              transform: scale(", ");\n            }\n\n            background-color: ", ";\n\n            border-color: ", ";\n\n            ", "\n          }\n        "], ["\n          cursor: pointer;\n\n          &:hover {\n            ", " ", " .reqore-panel-title-icon {\n              transform: scale(", ");\n            }\n\n            background-color: ", ";\n\n            border-color: ", ";\n\n            ", "\n          }\n        "])), exports.StyledPanelTitle, exports.StyledPanelTitleHeaderContent, styles_1.ACTIVE_ICON_SCALE, opacity === 0 && flat
             ? undefined
-            : rgba(darken(0.025, rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)), opacity), hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition })
-            ? changeLightness(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.25)
-            : undefined, opacity !== 0 && css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n              ", ":after {\n                background: linear-gradient(\n                  to top,\n                  ", "\n                    0%,\n                  transparent 100%\n                );\n              }\n            "], ["\n              ", ":after {\n                background: linear-gradient(\n                  to top,\n                  ", "\n                    0%,\n                  transparent 100%\n                );\n              }\n            "])), StyledCollectionItemContent, rgba(darken(0.025, rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)), opacity))) : undefined;
+            : (0, polished_1.rgba)((0, polished_1.darken)(0.025, (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity)), opacity), hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition })
+            ? (0, colors_2.changeLightness)(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.25)
+            : undefined, opacity !== 0 && (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n                ", ":after {\n                  background: linear-gradient(\n                    to top,\n                    ", "\n                      0%,\n                    transparent 100%\n                  );\n                }\n              "], ["\n                ", ":after {\n                  background: linear-gradient(\n                    to top,\n                    ", "\n                      0%,\n                    transparent 100%\n                  );\n                }\n              "])), item_1.StyledCollectionItemContent, (0, polished_1.rgba)((0, polished_1.darken)(0.025, (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity)), opacity))) : undefined;
 }, function (_a) {
     var raised = _a.raised, flat = _a.flat, intent = _a.intent, accentPosition = _a.accentPosition;
-    return raised && !hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition }) && RaisedElement;
+    return raised && !hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition }) && styles_1.RaisedElement;
 }, function (_a) {
     var fill = _a.fill, isCollapsed = _a.isCollapsed;
     return !isCollapsed && fill
-        ? css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n          height: 100%;\n          flex: 1;\n        "], ["\n          height: 100%;\n          flex: 1;\n        "]))) : undefined;
+        ? (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n          height: 100%;\n          flex: 1;\n        "], ["\n          height: 100%;\n          flex: 1;\n        "]))) : undefined;
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && DisabledElement;
+    return disabled && styles_1.DisabledElement;
 });
-export var StyledPanelTitle = styled.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: flex;\n  /* Always a row. The title bar used to flip to a column when narrow; it now ellipsizes its\n     label and lets the responsive action group collapse instead, which is what the \"hidden when\n     small\" actions are for and what the stack was quietly defeating (a column made the group\n     fluid, and a full-width group had room not to collapse). */\n  flex-flow: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  background-color: ", ";\n  justify-content: space-between;\n\n  padding: ", ";\n\n  align-items: center;\n  border-bottom: ", ";\n  transition: background-color 0.2s ease-out;\n  overflow: hidden;\n  flex: 0 0 auto;\n  gap: ", "px;\n\n  ", " .reqore-panel-title-icon {\n    transform: scale(", ");\n  }\n\n  ", "\n"], ["\n  display: flex;\n  /* Always a row. The title bar used to flip to a column when narrow; it now ellipsizes its\n     label and lets the responsive action group collapse instead, which is what the \"hidden when\n     small\" actions are for and what the stack was quietly defeating (a column made the group\n     fluid, and a full-width group had room not to collapse). */\n  flex-flow: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  background-color: ", ";\n  justify-content: space-between;\n\n  padding: ", ";\n\n  align-items: center;\n  border-bottom: ", ";\n  transition: background-color 0.2s ease-out;\n  overflow: hidden;\n  flex: 0 0 auto;\n  gap: ", "px;\n\n  ", " .reqore-panel-title-icon {\n    transform: scale(", ");\n  }\n\n  ", "\n"])), function (_a) {
+exports.StyledPanelTitle = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: flex;\n  /* Always a row. The title bar used to flip to a column when narrow; it now ellipsizes its\n     label and lets the responsive action group collapse instead, which is what the \"hidden when\n     small\" actions are for and what the stack was quietly defeating (a column made the group\n     fluid, and a full-width group had room not to collapse). */\n  flex-flow: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  background-color: ", ";\n  justify-content: space-between;\n\n  padding: ", ";\n\n  align-items: center;\n  border-bottom: ", ";\n  transition: background-color 0.2s ease-out;\n  overflow: hidden;\n  flex: 0 0 auto;\n  gap: ", "px;\n\n  ", " .reqore-panel-title-icon {\n    transform: scale(", ");\n  }\n\n  ", "\n"], ["\n  display: flex;\n  /* Always a row. The title bar used to flip to a column when narrow; it now ellipsizes its\n     label and lets the responsive action group collapse instead, which is what the \"hidden when\n     small\" actions are for and what the stack was quietly defeating (a column made the group\n     fluid, and a full-width group had room not to collapse). */\n  flex-flow: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  background-color: ", ";\n  justify-content: space-between;\n\n  padding: ", ";\n\n  align-items: center;\n  border-bottom: ", ";\n  transition: background-color 0.2s ease-out;\n  overflow: hidden;\n  flex: 0 0 auto;\n  gap: ", "px;\n\n  ", " .reqore-panel-title-icon {\n    transform: scale(", ");\n  }\n\n  ", "\n"])), function (_a) {
     var $descriptionBelow = _a.$descriptionBelow;
     return ($descriptionBelow ? 'row wrap' : 'row');
 }, function (_a) {
     var $descriptionFontPx = _a.$descriptionFontPx;
-    return !!$descriptionFontPx && css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      /* The description is a fixed px from `TEXT_FROM_SIZE` and knows nothing about the title\n         having shrunk, so a fitted title crosses under it: at the 12px floor the support text\n         renders at 15px and outranks the heading it supports. Scaling it by the SAME factor the\n         title took keeps the two in their original proportion instead of giving the description\n         a fit of its own \u2014 which would size it against its own box and let the pair drift apart\n         again, in the other direction. */\n      .reqore-panel-title-description {\n        font-size: ", "px;\n      }\n    "], ["\n      /* The description is a fixed px from \\`TEXT_FROM_SIZE\\` and knows nothing about the title\n         having shrunk, so a fitted title crosses under it: at the 12px floor the support text\n         renders at 15px and outranks the heading it supports. Scaling it by the SAME factor the\n         title took keeps the two in their original proportion instead of giving the description\n         a fit of its own \u2014 which would size it against its own box and let the pair drift apart\n         again, in the other direction. */\n      .reqore-panel-title-description {\n        font-size: ", "px;\n      }\n    "])), $descriptionFontPx);
+    return !!$descriptionFontPx && (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      /* The description is a fixed px from `TEXT_FROM_SIZE` and knows nothing about the title\n         having shrunk, so a fitted title crosses under it: at the 12px floor the support text\n         renders at 15px and outranks the heading it supports. Scaling it by the SAME factor the\n         title took keeps the two in their original proportion instead of giving the description\n         a fit of its own \u2014 which would size it against its own box and let the pair drift apart\n         again, in the other direction. */\n      .reqore-panel-title-description {\n        font-size: ", "px;\n      }\n    "], ["\n      /* The description is a fixed px from \\`TEXT_FROM_SIZE\\` and knows nothing about the title\n         having shrunk, so a fitted title crosses under it: at the 12px floor the support text\n         renders at 15px and outranks the heading it supports. Scaling it by the SAME factor the\n         title took keeps the two in their original proportion instead of giving the description\n         a fit of its own \u2014 which would size it against its own box and let the pair drift apart\n         again, in the other direction. */\n      .reqore-panel-title-description {\n        font-size: ", "px;\n      }\n    "])), $descriptionFontPx);
 }, function (_a) {
     var $descriptionBelow = _a.$descriptionBelow;
-    return $descriptionBelow && css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      /* Only on a wrapping bar. The header claims the row so the action group beside it gets\n         squeezed and folds \u2014 that is what the base rule is for \u2014 but in a WRAPPING row a\n         full-width claim takes the whole line and pushes the actions onto their own, which is\n         not what \"description below\" asked for. Here the header grows from 0 into whatever the\n         actions leave, on line one, and the description takes line two. */\n      > .reqore-panel-title-header {\n        width: auto;\n        flex: 1 1 0%;\n        min-width: 0;\n      }\n    "], ["\n      /* Only on a wrapping bar. The header claims the row so the action group beside it gets\n         squeezed and folds \u2014 that is what the base rule is for \u2014 but in a WRAPPING row a\n         full-width claim takes the whole line and pushes the actions onto their own, which is\n         not what \"description below\" asked for. Here the header grows from 0 into whatever the\n         actions leave, on line one, and the description takes line two. */\n      > .reqore-panel-title-header {\n        width: auto;\n        flex: 1 1 0%;\n        min-width: 0;\n      }\n    "])));
+    return $descriptionBelow && (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      /* Only on a wrapping bar. The header claims the row so the action group beside it gets\n         squeezed and folds \u2014 that is what the base rule is for \u2014 but in a WRAPPING row a\n         full-width claim takes the whole line and pushes the actions onto their own, which is\n         not what \"description below\" asked for. Here the header grows from 0 into whatever the\n         actions leave, on line one, and the description takes line two. */\n      > .reqore-panel-title-header {\n        width: auto;\n        flex: 1 1 0%;\n        min-width: 0;\n      }\n    "], ["\n      /* Only on a wrapping bar. The header claims the row so the action group beside it gets\n         squeezed and folds \u2014 that is what the base rule is for \u2014 but in a WRAPPING row a\n         full-width claim takes the whole line and pushes the actions onto their own, which is\n         not what \"description below\" asked for. Here the header grows from 0 into whatever the\n         actions leave, on line one, and the description takes line two. */\n      > .reqore-panel-title-header {\n        width: auto;\n        flex: 1 1 0%;\n        min-width: 0;\n      }\n    "])));
 }, function (_a) {
     var $descriptionMaxLines = _a.$descriptionMaxLines;
-    return !!$descriptionMaxLines && css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      .reqore-panel-title-description {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        overflow-wrap: anywhere;\n      }\n    "], ["\n      .reqore-panel-title-description {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        overflow-wrap: anywhere;\n      }\n    "])), $descriptionMaxLines);
+    return !!$descriptionMaxLines && (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      .reqore-panel-title-description {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        overflow-wrap: anywhere;\n      }\n    "], ["\n      .reqore-panel-title-description {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        overflow-wrap: anywhere;\n      }\n    "])), $descriptionMaxLines);
 }, function (_a) {
     var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
-    return rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity);
+    return (0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity);
 }, function (_a) {
     var noHorizontalPadding = _a.noHorizontalPadding, size = _a.size, padded = _a.padded, opacity = _a.opacity, flat = _a.flat, intent = _a.intent;
     return "".concat(opacity === 0 && flat && !intent ? 0 : getPaddingSize(padded, size), "px ").concat(noHorizontalPadding ? 0 : "".concat(getPaddingSize(padded, size), "px"));
 }, function (_a) {
     var theme = _a.theme, isCollapsed = _a.isCollapsed, flat = _a.flat, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
     return !isCollapsed && !flat && opacity
-        ? "1px solid ".concat(rgba(changeLightness(getMainBackgroundColor(theme), 0.08), opacity))
+        ? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
         : null;
-}, GAP_FROM_SIZE.normal, StyledPanelTitleHeaderContent, INACTIVE_ICON_SCALE, function (_a) {
+}, sizes_1.GAP_FROM_SIZE.normal, exports.StyledPanelTitleHeaderContent, styles_1.INACTIVE_ICON_SCALE, function (_a) {
     var collapsible = _a.collapsible;
-    return collapsible && css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      cursor: pointer;\n      &:hover {\n        ", " .reqore-panel-title-icon {\n          transform: scale(", ");\n        }\n\n        background-color: ", ";\n      }\n    "], ["\n      cursor: pointer;\n      &:hover {\n        ", " .reqore-panel-title-icon {\n          transform: scale(", ");\n        }\n\n        background-color: ", ";\n      }\n    "])), StyledPanelTitleHeaderContent, ACTIVE_ICON_SCALE, function (_a) {
+    return collapsible && (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      cursor: pointer;\n      &:hover {\n        ", " .reqore-panel-title-icon {\n          transform: scale(", ");\n        }\n\n        background-color: ", ";\n      }\n    "], ["\n      cursor: pointer;\n      &:hover {\n        ", " .reqore-panel-title-icon {\n          transform: scale(", ");\n        }\n\n        background-color: ", ";\n      }\n    "])), exports.StyledPanelTitleHeaderContent, styles_1.ACTIVE_ICON_SCALE, function (_a) {
         var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
-        return rgba(changeLightness(getMainBackgroundColor(theme), 0.05), opacity);
+        return (0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.05), opacity);
     });
 });
-export var StyledPanelTopBar = styled(StyledPanelTitle)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* `top: 0` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. `stickyHeaderInset` is\n     that padding, measured from the real scroll ancestor at runtime;\n     `stickyHeaderOffset` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"], ["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* \\`top: 0\\` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. \\`stickyHeaderInset\\` is\n     that padding, measured from the real scroll ancestor at runtime;\n     \\`stickyHeaderOffset\\` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"])), function (_a) {
+exports.StyledPanelTopBar = (0, styled_components_1.default)(exports.StyledPanelTitle)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* `top: 0` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. `stickyHeaderInset` is\n     that padding, measured from the real scroll ancestor at runtime;\n     `stickyHeaderOffset` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"], ["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* \\`top: 0\\` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. \\`stickyHeaderInset\\` is\n     that padding, measured from the real scroll ancestor at runtime;\n     \\`stickyHeaderOffset\\` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"])), function (_a) {
     var padded = _a.padded, size = _a.size, isCollapsed = _a.isCollapsed, minimal = _a.minimal;
     return !padded || isCollapsed || !minimal
         ? "".concat(getPaddingSize(padded, size), "px")
@@ -290,7 +328,7 @@ export var StyledPanelTopBar = styled(StyledPanelTitle)(templateObject_27 || (te
     return stickyHeader && rounded
         ? isStuck
             ? '0px'
-            : "".concat(Math.max(0, resolveRadius('normal', radiusSize) -
+            : "".concat(Math.max(0, (0, sizes_1.resolveRadius)('normal', radiusSize) -
                 (hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition }) ? 1 : 0)), "px")
         : undefined;
 }, function (_a) {
@@ -298,18 +336,18 @@ export var StyledPanelTopBar = styled(StyledPanelTitle)(templateObject_27 || (te
     return stickyHeader && rounded
         ? isStuck
             ? '0px'
-            : "".concat(Math.max(0, resolveRadius('normal', radiusSize) -
+            : "".concat(Math.max(0, (0, sizes_1.resolveRadius)('normal', radiusSize) -
                 (hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition }) ? 1 : 0)), "px")
         : undefined;
 }, function (_a) {
     var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
-    return rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity);
+    return (0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity);
 }, function (_a) {
     var stickyHeader = _a.stickyHeader, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
     return stickyHeader &&
-        opacity === 0 && css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      backdrop-filter: blur(30px);\n      -webkit-backdrop-filter: blur(30px);\n    "], ["\n      backdrop-filter: blur(30px);\n      -webkit-backdrop-filter: blur(30px);\n    "])));
+        opacity === 0 && (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      backdrop-filter: blur(30px);\n      -webkit-backdrop-filter: blur(30px);\n    "], ["\n      backdrop-filter: blur(30px);\n      -webkit-backdrop-filter: blur(30px);\n    "])));
 });
-export var StyledPanelBottomActions = styled(StyledPanelTitle)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"], ["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"])), function (_a) {
+exports.StyledPanelBottomActions = (0, styled_components_1.default)(exports.StyledPanelTitle)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"], ["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"])), function (_a) {
     var padded = _a.padded, size = _a.size, minimal = _a.minimal;
     return !padded || !minimal
         ? "".concat(getPaddingSize(padded, size), "px")
@@ -326,10 +364,10 @@ export var StyledPanelBottomActions = styled(StyledPanelTitle)(templateObject_28
 }, function (_a) {
     var theme = _a.theme, flat = _a.flat, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
     return !flat
-        ? "1px solid ".concat(rgba(changeLightness(getMainBackgroundColor(theme), 0.08), opacity))
+        ? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
         : null;
 });
-export var StyledPanelContent = styled.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"], ["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"])), function (_a) {
+exports.StyledPanelContent = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"], ["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"])), function (_a) {
     var isCollapsed = _a.isCollapsed;
     return (isCollapsed ? 'none !important' : undefined);
 }, function (_a) {
@@ -341,64 +379,64 @@ export var StyledPanelContent = styled.div(templateObject_29 || (templateObject_
             : "".concat(getPaddingSize(padded, size), "px ").concat(getPaddingSize(padded, size), "px");
 }, function (_a) {
     var size = _a.size;
-    return TEXT_FROM_SIZE[size];
+    return sizes_1.TEXT_FROM_SIZE[size];
 });
-export var StyledFloatingActions = styled.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"], ["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"])), function (_a) {
+exports.StyledFloatingActions = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"], ["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"])), function (_a) {
     var size = _a.size;
-    return PADDING_FROM_SIZE[size];
+    return sizes_1.PADDING_FROM_SIZE[size];
 }, function (_a) {
     var theme = _a.theme;
-    return rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), 1);
+    return (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), 1);
 }, function (_a) {
     var theme = _a.theme, flat = _a.flat, intent = _a.intent;
     return flat && !intent
         ? undefined
-        : "1px solid ".concat(changeLightness(intent ? theme.intents[intent] : getMainBackgroundColor(theme), 0.08));
+        : "1px solid ".concat((0, colors_2.changeLightness)(intent ? theme.intents[intent] : (0, colors_2.getMainBackgroundColor)(theme), 0.08));
 }, function (_a) {
     var radiusSize = _a.radiusSize, size = _a.size;
-    return resolveRadius(size, radiusSize);
+    return (0, sizes_1.resolveRadius)(size, radiusSize);
 }, function (_a) {
     var radiusSize = _a.radiusSize, size = _a.size;
-    return resolveRadius(size, radiusSize);
+    return (0, sizes_1.resolveRadius)(size, radiusSize);
 }, function (_a) {
     var size = _a.size;
-    return GAP_FROM_SIZE[size];
+    return sizes_1.GAP_FROM_SIZE[size];
 });
-export var ReqorePanelSkeleton = memo(function (_a) {
+exports.ReqorePanelSkeleton = (0, react_2.memo)(function (_a) {
     var size = _a.size, isCollapsed = _a.isCollapsed, children = _a.children;
-    var style = useMemo(function () { return ({ padding: "".concat(PADDING_FROM_SIZE[size], "px") }); }, [size]);
-    return (_jsxs(ReqoreControlGroup, { vertical: true, fluid: true, gapSize: 'big', style: style, children: [_jsxs(ReqoreControlGroup, { spaceBetween: true, fluid: true, children: [_jsxs(ReqoreControlGroup, { fixed: true, gapSize: 'big', children: [_jsx(ReqoreSkeleton, { circle: true, size: size }), _jsx(ReqoreSkeleton, { width: '200px', size: size })] }), _jsxs(ReqoreControlGroup, { fixed: true, children: [_jsx(ReqoreSkeleton, { size: size }), _jsx(ReqoreSkeleton, { size: size })] })] }), !isCollapsed &&
-                (children ? (children) : (_jsx(ReqoreControlGroup, { vertical: true, children: _jsx(ReqoreSkeleton, { lines: 5, width: '100%', size: 'tiny' }) })))] }));
+    var style = (0, react_2.useMemo)(function () { return ({ padding: "".concat(sizes_1.PADDING_FROM_SIZE[size], "px") }); }, [size]);
+    return ((0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { vertical: true, fluid: true, gapSize: 'big', style: style, children: [(0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { spaceBetween: true, fluid: true, children: [(0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { fixed: true, gapSize: 'big', children: [(0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { circle: true, size: size }), (0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { width: '200px', size: size })] }), (0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { fixed: true, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { size: size }), (0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { size: size })] })] }), !isCollapsed &&
+                (children ? (children) : ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { vertical: true, children: (0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { lines: 5, width: '100%', size: 'tiny' }) })))] }));
 });
-export var ReqorePanel = forwardRef(function (_a, ref) {
+exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     var _b, _c;
     var children = _a.children, label = _a.label, description = _a.description, _d = _a.collapseButtonProps, collapseButtonProps = _d === void 0 ? {} : _d, collapsible = _a.collapsible, onClose = _a.onClose, _e = _a.closeButtonProps, closeButtonProps = _e === void 0 ? {} : _e, _f = _a.rounded, rounded = _f === void 0 ? true : _f, _g = _a.actions, actions = _g === void 0 ? [] : _g, _h = _a.bottomActions, bottomActions = _h === void 0 ? [] : _h, isCollapsed = _a.isCollapsed, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, icon = _a.icon, iconImage = _a.iconImage, _j = _a.iconWithLabel, iconWithLabel = _j === void 0 ? false : _j, _k = _a.iconVerticalAlign, iconVerticalAlign = _k === void 0 ? 'center' : _k, intent = _a.intent, className = _a.className, flat = _a.flat, _l = _a.unMountContentOnCollapse, unMountContentOnCollapse = _l === void 0 ? true : _l, onCollapseChange = _a.onCollapseChange, _m = _a.padded, padded = _m === void 0 ? true : _m, _o = _a.wrapperPadding, wrapperPadding = _o === void 0 ? 'both' : _o, contentStyle = _a.contentStyle, contentEffect = _a.contentEffect, _p = _a.labelEffect, labelEffect = _p === void 0 ? {} : _p, _q = _a.descriptionEffect, descriptionEffect = _q === void 0 ? {} : _q, descriptionIntent = _a.descriptionIntent, labelSize = _a.labelSize, contentSize = _a.contentSize, minimal = _a.minimal, badge = _a.badge, iconColor = _a.iconColor, _r = _a.iconProps, iconProps = _r === void 0 ? {} : _r, fluid = _a.fluid, _s = _a.responsiveActions, responsiveActions = _s === void 0 ? true : _s, _t = _a.responsiveTitle, responsiveTitle = _t === void 0 ? true : _t, _u = _a.compactTitle, compactTitle = _u === void 0 ? false : _u, _v = _a.fitLabel, fitLabel = _v === void 0 ? true : _v, _w = _a.labelMaxLines, labelMaxLines = _w === void 0 ? 2 : _w, _x = _a.descriptionPosition, descriptionPosition = _x === void 0 ? 'inline' : _x, _y = _a.descriptionMaxLines, descriptionMaxLines = _y === void 0 ? 2 : _y, labelMinTextSize = _a.labelMinTextSize, _z = _a.size, panelSize = _z === void 0 ? 'normal' : _z, getContentRef = _a.getContentRef, _0 = _a.labelProps, labelProps = _0 === void 0 ? {} : _0, disabled = _a.disabled, breadcrumbs = _a.breadcrumbs, _1 = _a.showActionsWhenCollapsed, showActionsWhenCollapsed = _1 === void 0 ? true : _1, showLabelTooltip = _a.showLabelTooltip, customLabelTooltip = _a.customLabelTooltip, resizable = _a.resizable, onLabelEdit = _a.onLabelEdit, responsiveActionsWrapperProps = _a.responsiveActionsWrapperProps, loading = _a.loading, loadingIconType = _a.loadingIconType, skeleton = _a.skeleton, errorBoundaryOptions = _a.errorBoundaryOptions, floatingActions = _a.floatingActions, _2 = _a.collapseTooltip, collapseTooltip = _2 === void 0 ? 'Collapse' : _2, _3 = _a.expandTooltip, expandTooltip = _3 === void 0 ? 'Expand' : _3, _4 = _a.closeTooltip, closeTooltip = _4 === void 0 ? 'Close' : _4, accentPosition = _a.accentPosition, accentSize = _a.accentSize, rest = __rest(_a, ["children", "label", "description", "collapseButtonProps", "collapsible", "onClose", "closeButtonProps", "rounded", "actions", "bottomActions", "isCollapsed", "customTheme", "inheritCustomTheme", "icon", "iconImage", "iconWithLabel", "iconVerticalAlign", "intent", "className", "flat", "unMountContentOnCollapse", "onCollapseChange", "padded", "wrapperPadding", "contentStyle", "contentEffect", "labelEffect", "descriptionEffect", "descriptionIntent", "labelSize", "contentSize", "minimal", "badge", "iconColor", "iconProps", "fluid", "responsiveActions", "responsiveTitle", "compactTitle", "fitLabel", "labelMaxLines", "descriptionPosition", "descriptionMaxLines", "labelMinTextSize", "size", "getContentRef", "labelProps", "disabled", "breadcrumbs", "showActionsWhenCollapsed", "showLabelTooltip", "customLabelTooltip", "resizable", "onLabelEdit", "responsiveActionsWrapperProps", "loading", "loadingIconType", "skeleton", "errorBoundaryOptions", "floatingActions", "collapseTooltip", "expandTooltip", "closeTooltip", "accentPosition", "accentSize"]);
     // Resolved ONCE, here — the accent styles interpolate px and reserve padding,
     // so they must only ever see a number. Shared with ReqoreCallout.
-    var accentSizePx = useMemo(function () { return resolveAccentSize(accentSize); }, [accentSize]);
-    var _5 = useState(isCollapsed || false), _isCollapsed = _5[0], setIsCollapsed = _5[1];
-    var primaryContentGradient = getPrimaryGradient(contentEffect === null || contentEffect === void 0 ? void 0 : contentEffect.gradient);
+    var accentSizePx = (0, react_2.useMemo)(function () { return (0, utils_1.resolveAccentSize)(accentSize); }, [accentSize]);
+    var _5 = (0, react_2.useState)(isCollapsed || false), _isCollapsed = _5[0], setIsCollapsed = _5[1];
+    var primaryContentGradient = (0, Effect_1.getPrimaryGradient)(contentEffect === null || contentEffect === void 0 ? void 0 : contentEffect.gradient);
     var primaryContentColors = primaryContentGradient && typeof primaryContentGradient.colors === 'object'
         ? primaryContentGradient.colors
         : undefined;
     var firstContentGradientColor = primaryContentColors
         ? Object.values(primaryContentColors)[0]
         : undefined;
-    var theme = useReqoreTheme('main', customTheme ||
+    var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme ||
         (firstContentGradientColor && minimal ? { main: firstContentGradientColor } : undefined), undefined, undefined, inheritCustomTheme);
-    useEffect(function () {
+    (0, react_2.useEffect)(function () {
         return function () {
             if (hoverTimerRef.current)
                 clearTimeout(hoverTimerRef.current);
         };
     }, []);
-    var isMobile = useReqoreProperty('isMobile');
-    var targetRef = useCombinedRefs(ref).targetRef;
-    var _6 = useMeasure(), measureRef = _6[0], width = _6[1].width;
-    var _7 = useState(false), _isHovered = _7[0], setIsHovered = _7[1];
-    var floatingActionsRef = useRef(null);
-    var panelRef = useRef(null);
-    var hoverTimerRef = useRef(null);
+    var isMobile = (0, useReqoreContext_1.useReqoreProperty)('isMobile');
+    var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
+    var _6 = (0, react_use_1.useMeasure)(), measureRef = _6[0], width = _6[1].width;
+    var _7 = (0, react_2.useState)(false), _isHovered = _7[0], setIsHovered = _7[1];
+    var floatingActionsRef = (0, react_2.useRef)(null);
+    var panelRef = (0, react_2.useRef)(null);
+    var hoverTimerRef = (0, react_2.useRef)(null);
     // Runtime stuck-detection for the sticky header: a 0-height sentinel sits at
     // the very top of the panel, directly above the header. The header is
     // "stuck" once that sentinel has scrolled up to (or past) the sticky line of
@@ -412,10 +450,10 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
     // sentinel (not the header) means the panel's OWN content scroll never
     // triggers it. Only wired when `stickyHeader` is on, so ordinary panels pay
     // nothing.
-    var stickySentinelRef = useRef(null);
-    var _8 = useState(false), isHeaderStuck = _8[0], setIsHeaderStuck = _8[1];
-    var _9 = useState(0), stickyInset = _9[0], setStickyInset = _9[1];
-    useEffect(function () {
+    var stickySentinelRef = (0, react_2.useRef)(null);
+    var _8 = (0, react_2.useState)(false), isHeaderStuck = _8[0], setIsHeaderStuck = _8[1];
+    var _9 = (0, react_2.useState)(0), stickyInset = _9[0], setStickyInset = _9[1];
+    (0, react_2.useEffect)(function () {
         var _a;
         if (!rest.stickyHeader) {
             setIsHeaderStuck(false);
@@ -438,9 +476,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
             // pins to. Comparing against the bare border box flips `isHeaderStuck`
             // late by the scrollport's inset, so a pinned header keeps its top
             // radius through exactly the gap this fix closes.
-            var rootTop = scrollParent
-                ? scrollParent.getBoundingClientRect().top + inset.border
-                : 0;
+            var rootTop = scrollParent ? scrollParent.getBoundingClientRect().top + inset.border : 0;
             // 1px deadzone so the exact at-rest position (sentinel flush against the
             // top) never reads as stuck.
             setIsHeaderStuck(sentinelTop < rootTop + offset - 1);
@@ -471,12 +507,12 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
                 cancelAnimationFrame(frame);
         };
     }, [rest.stickyHeader, rest.stickyHeaderOffset]);
-    useUpdateEffect(function () {
+    (0, react_use_1.useUpdateEffect)(function () {
         setIsCollapsed(!!isCollapsed);
     }, [isCollapsed]);
-    var floatingActionsList = useMemo(function () { return (floatingActions ? actions.filter(function (action) { return action.show === 'hover'; }) : []); }, [floatingActions, actions]);
-    var nonFloatingActions = useMemo(function () { return (floatingActions ? actions.filter(function (action) { return action.show !== 'hover'; }) : actions); }, [floatingActions, actions]);
-    var updateFloatingActionsPosition = useCallback(function () {
+    var floatingActionsList = (0, react_2.useMemo)(function () { return (floatingActions ? actions.filter(function (action) { return action.show === 'hover'; }) : []); }, [floatingActions, actions]);
+    var nonFloatingActions = (0, react_2.useMemo)(function () { return (floatingActions ? actions.filter(function (action) { return action.show !== 'hover'; }) : actions); }, [floatingActions, actions]);
+    var updateFloatingActionsPosition = (0, react_2.useCallback)(function () {
         if (!floatingActionsRef.current || !panelRef.current)
             return;
         var panelRect = panelRef.current.getBoundingClientRect();
@@ -495,15 +531,15 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         floatingActionsRef.current.style.top = "".concat(panelRect.top - floatingRect.height + (flat ? 0 : 1), "px");
         floatingActionsRef.current.style.left = "".concat(panelRect.right - floatingRect.width, "px");
     }, [flat]);
-    useEffect(function () {
-        if (!_isHovered || !floatingActions || !size(floatingActionsList))
+    (0, react_2.useEffect)(function () {
+        if (!_isHovered || !floatingActions || !(0, lodash_1.size)(floatingActionsList))
             return undefined;
         updateFloatingActionsPosition();
         var onScroll = function () { return updateFloatingActionsPosition(); };
         window.addEventListener('scroll', onScroll, true);
         return function () { return window.removeEventListener('scroll', onScroll, true); };
     }, [_isHovered, floatingActions, floatingActionsList, updateFloatingActionsPosition]);
-    var handleMouseEnter = useCallback(function (e) {
+    var handleMouseEnter = (0, react_2.useCallback)(function (e) {
         var _a;
         if (floatingActions) {
             if (hoverTimerRef.current)
@@ -512,14 +548,14 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         }
         (_a = rest.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(rest, e);
     }, [floatingActions, rest.onMouseEnter]);
-    var cancelHover = useCallback(function () {
+    var cancelHover = (0, react_2.useCallback)(function () {
         if (hoverTimerRef.current) {
             clearTimeout(hoverTimerRef.current);
             hoverTimerRef.current = null;
         }
         setIsHovered(false);
     }, []);
-    var handleMouseLeave = useCallback(function (e) {
+    var handleMouseLeave = (0, react_2.useCallback)(function (e) {
         var _a;
         if (floatingActions) {
             var relatedTarget = e.relatedTarget;
@@ -532,7 +568,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         }
         (_a = rest.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(rest, e);
     }, [floatingActions, rest.onMouseLeave, cancelHover]);
-    var handleFloatingActionsMouseLeave = useCallback(function (e) {
+    var handleFloatingActionsMouseLeave = (0, react_2.useCallback)(function (e) {
         var relatedTarget = e.relatedTarget;
         if (panelRef.current &&
             relatedTarget instanceof Node &&
@@ -541,7 +577,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         }
         cancelHover();
     }, [cancelHover]);
-    var _resizable = useMemo(function () {
+    var _resizable = (0, react_2.useMemo)(function () {
         // Only carry re-resizable's props when the panel actually renders as a
         // `Resizable` (the same condition the `as` below uses). Otherwise the
         // element is a plain `div`, and — now that these props are forwarded
@@ -552,17 +588,17 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         return isResizableElement && resizable ? resizable : {};
     }, [resizable, _isCollapsed, disabled]);
     // Return true if the card has a title bar, otherwise return false.
-    var hasTitleBar = useMemo(function () {
+    var hasTitleBar = (0, react_2.useMemo)(function () {
         return !!label ||
             !!breadcrumbs ||
             collapsible ||
             !!onClose ||
-            !!size(nonFloatingActions.filter(isActionShown)) ||
-            !!(isArray(badge) ? size(badge) : badge) ||
+            !!(0, lodash_1.size)(nonFloatingActions.filter(utils_1.isActionShown)) ||
+            !!((0, lodash_1.isArray)(badge) ? (0, lodash_1.size)(badge) : badge) ||
             !!icon;
     }, [label, collapsible, onClose, nonFloatingActions, badge, icon]);
     // Return true if the card has a title bar, otherwise return false.
-    var hasTitleHeader = useMemo(function () { return !!label || !!badge || !!icon || !!breadcrumbs; }, [label, icon, badge, breadcrumbs]);
+    var hasTitleHeader = (0, react_2.useMemo)(function () { return !!label || !!badge || !!icon || !!breadcrumbs; }, [label, icon, badge, breadcrumbs]);
     /**
      * `width` comes from `useMeasure`, which reports 0 until the element is actually measured —
      * and in jsdom it stays 0 forever. `0 < 480` is true, so an unmeasured panel used to claim it
@@ -577,7 +613,12 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
      * Asking whether the width was MEASURED says what the guard always meant. jsdom keeps its 0
      * and stays wide, so the unit suite is unaffected; a browser measures and behaves.
      */
-    var isSmall = useMemo(function () { return responsiveTitle && width > 0 && width < 480; }, [width, responsiveTitle]);
+    /* The same rule, from the helper that carries it and its tests —
+       `panelIsSmall` is `responsiveTitle && width > 0 && width < 480`, written
+       once so the unit suite can reach it without mounting a panel. Both sides
+       of this merge fixed the unmeasured-panel bug independently; keeping the
+       expression in two places is how they would drift. */
+    var isSmall = (0, react_2.useMemo)(function () { return (0, responsive_1.panelIsSmall)(width, responsiveTitle); }, [width, responsiveTitle]);
     /**
      * Narrow, from either trigger: the panel measuring under 480px, or the provider's
      * viewport-level `isMobile`.
@@ -609,27 +650,27 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
     // If collapsible is true, toggle the isCollapsed state
     // If the isCollapsed state is true, the component is expanded
     // If the isCollapsed state is false, the component is collapsed
-    var handleCollapseClick = useCallback(function () {
+    var handleCollapseClick = (0, react_2.useCallback)(function () {
         // If collapsible is true, toggle the isCollapsed state
         if (collapsible) {
             setIsCollapsed(!_isCollapsed);
             onCollapseChange === null || onCollapseChange === void 0 ? void 0 : onCollapseChange(!_isCollapsed);
         }
     }, [collapsible, _isCollapsed, onCollapseChange]);
-    var leftBottomActions = useMemo(function () { return bottomActions.filter(function (_a) {
+    var leftBottomActions = (0, react_2.useMemo)(function () { return bottomActions.filter(function (_a) {
         var position = _a.position;
         return position === 'left' || !position;
     }); }, [bottomActions]);
-    var rightBottomActions = useMemo(function () { return bottomActions.filter(function (_a) {
+    var rightBottomActions = (0, react_2.useMemo)(function () { return bottomActions.filter(function (_a) {
         var position = _a.position;
         return position === 'right';
     }); }, [bottomActions]);
     // Calculates whether or not the bottom actions should be displayed.
-    var hasBottomActions = useMemo(function () {
-        return !!(size(leftBottomActions.filter(isActionShown)) ||
-            size(rightBottomActions.filter(isActionShown)));
+    var hasBottomActions = (0, react_2.useMemo)(function () {
+        return !!((0, lodash_1.size)(leftBottomActions.filter(utils_1.isActionShown)) ||
+            (0, lodash_1.size)(rightBottomActions.filter(utils_1.isActionShown)));
     }, [leftBottomActions, rightBottomActions]);
-    var renderResponsiveActions = useCallback(function (align) {
+    var renderResponsiveActions = (0, react_2.useCallback)(function (align) {
         if (align === void 0) { align = 'flex-end'; }
         return function (action, index) {
             return renderActions(action, index, true, align);
@@ -642,7 +683,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
     // effect. That is what silently defeated dropping the action labels: the flag flipped and
     // the closure did not. (`renderActions` itself cannot go here: it is declared below.)
     [isNarrow, actions, showActionsWhenCollapsed, _isCollapsed]);
-    var hasNonResponsiveActions = useCallback(
+    var hasNonResponsiveActions = (0, react_2.useCallback)(
     // `show: false` has to be honoured on BOTH paths. The `responsiveActions: false` arm used
     // to ask only whether the array had entries, so a panel whose every action is hidden still
     // reported having some and rendered an empty control group. It went unnoticed while the
@@ -652,11 +693,11 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
             return (!responsiveActions || action.responsive === false) && action.show !== false;
         });
     }, [actions, bottomActions, responsiveActions, showActionsWhenCollapsed, _isCollapsed]);
-    var hasResponsiveActions = useCallback(function (data) {
+    var hasResponsiveActions = (0, react_2.useCallback)(function (data) {
         return responsiveActions &&
             data.some(function (action) { return action.responsive !== false && action.show !== false; });
     }, [actions, bottomActions, responsiveActions, showActionsWhenCollapsed, _isCollapsed]);
-    var renderNonResponsiveActions = useCallback(function (align) {
+    var renderNonResponsiveActions = (0, react_2.useCallback)(function (align) {
         if (align === void 0) { align = 'flex-end'; }
         return function (action, index) {
             return renderActions(action, index, false, align);
@@ -669,7 +710,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         showActionsWhenCollapsed,
         _isCollapsed,
     ]);
-    var renderActions = useCallback(function (action, index, includeResponsive, align) {
+    var renderActions = (0, react_2.useCallback)(function (action, index, includeResponsive, align) {
         if (align === void 0) { align = 'flex-end'; }
         if (action.show === false ||
             (showActionsWhenCollapsed === false && _isCollapsed === true) ||
@@ -682,15 +723,15 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         var id = action.id, actions = action.actions, actionsProps = action.actionsProps, label = action.label, intent = action.intent, CustomElement = action.as, _a = action.props, props = _a === void 0 ? {} : _a, group = action.group, show = action.show, rest = __rest(action, ["id", "actions", "actionsProps", "label", "intent", "as", "props", "group", "show"]);
         var className = action.className;
         // If the show prop is 'hover', add the hidden class to the action
-        className = classNames(className, show === 'hover' ? 'reqore-panel-action-hidden' : '');
-        if (size(group)) {
-            return (_jsx(ReqoreControlGroup, { intent: intent, stack: true, customTheme: rest.customTheme || theme, size: rest.size, fixed: rest.fixed, fluid: rest.fluid, className: className, horizontalAlign: align, children: group.map(function (action, index) { return renderActions(action, index, true); }) }, index));
+        className = (0, classnames_1.default)(className, show === 'hover' ? 'reqore-panel-action-hidden' : '');
+        if ((0, lodash_1.size)(group)) {
+            return ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { intent: intent, stack: true, customTheme: rest.customTheme || theme, size: rest.size, fixed: rest.fixed, fluid: rest.fluid, className: className, horizontalAlign: align, children: group.map(function (action, index) { return renderActions(action, index, true); }) }, index));
         }
-        if (size(actions)) {
-            return (_createElement(ReqoreDropdown, __assign({ fixed: true }, rest, { key: index, label: label, intent: intent, className: className, customTheme: rest.customTheme || theme, id: id }, actionsProps, { items: actions.filter(isActionShown), onClick: function (e) { return e.stopPropagation(); } })));
+        if ((0, lodash_1.size)(actions)) {
+            return ((0, react_1.createElement)(Dropdown_1.default, __assign({ fixed: true }, rest, { key: index, label: label, intent: intent, className: className, customTheme: rest.customTheme || theme, id: id }, actionsProps, { items: actions.filter(utils_1.isActionShown), onClick: function (e) { return e.stopPropagation(); } })));
         }
         if (CustomElement) {
-            return (_createElement(CustomElement, __assign({ fixed: true }, props, { className: classNames(className, props.className), key: props.key || index, customTheme: props.customTheme || theme, onClick: props.onClick
+            return ((0, react_1.createElement)(CustomElement, __assign({ fixed: true }, props, { className: (0, classnames_1.default)(className, props.className), key: props.key || index, customTheme: props.customTheme || theme, onClick: props.onClick
                     ? function (e) {
                         var _a;
                         e.stopPropagation();
@@ -705,9 +746,16 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         // a blank box — and a caller can pin the label with `responsive: false`.
         // `label` on an action is typed `string | number`; a tooltip is not, so the numeric
         // case is stringified rather than cast away.
+        //
+        // `responsive: false` has to be read HERE, not only by the group that renders the
+        // action: it used to decide which control group an action was rendered in and
+        // nothing else, so a pinned label was dropped anyway and the escape hatch this
+        // comment promises did not exist. It is what the confirmation dialog stands on —
+        // two unlabelled squares, a tick and a cross, name neither the action nor the
+        // one that throws the work away.
         var actionLabelTooltip = typeof label === 'number' ? String(label) : label;
-        var dropActionLabel = isNarrow && !!rest.icon && !!label;
-        return (_createElement(ReqoreButton, __assign({ fixed: true }, rest, { id: id, key: index, className: className, customTheme: rest.customTheme || theme, intent: intent, tooltip: dropActionLabel ? rest.tooltip || actionLabelTooltip : rest.tooltip, onClick: rest.onClick
+        var dropActionLabel = isNarrow && action.responsive !== false && !!rest.icon && !!label;
+        return ((0, react_1.createElement)(Button_1.default, __assign({ fixed: true }, rest, { id: id, key: index, className: className, customTheme: rest.customTheme || theme, intent: intent, tooltip: dropActionLabel ? rest.tooltip || actionLabelTooltip : rest.tooltip, onClick: rest.onClick
                 ? function (e) {
                     var _a;
                     e.stopPropagation();
@@ -720,10 +768,10 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         rest.onMouseEnter ||
         rest.onDoubleClick ||
         rest.onContextMenu);
-    var transformedContentEffect = useMemo(function () {
+    var transformedContentEffect = (0, react_2.useMemo)(function () {
         var newContentEffect = __assign({}, contentEffect);
         if (newContentEffect.gradient && intent) {
-            newContentEffect.gradient = patchPrimaryGradient(newContentEffect.gradient, {
+            newContentEffect.gradient = (0, Effect_1.patchPrimaryGradient)(newContentEffect.gradient, {
                 borderColor: theme.intents[intent],
             });
         }
@@ -732,7 +780,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
     }, [intent, theme, contentEffect, interactive]);
     var opacity = rest.transparent ? 0 : rest.opacity;
     var noHorizontalPadding = opacity === 0 && flat && !intent && !rest.raised;
-    var showNonResponsiveGroup = useCallback(function () {
+    var showNonResponsiveGroup = (0, react_2.useCallback)(function () {
         var show = false;
         // SHOULD THIS GROUP SHOW CONTROL BUTTONS?
         // Always, now that a narrow bar stays on one row: there is no separate control row for them
@@ -753,7 +801,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
      * The title's natural size in px, from the heading level it renders at — the same
      * `labelSize || HEADER_SIZE_TO_NUMBER[panelSize]` the icon is sized from.
      */
-    var labelNaturalPx = (_b = HEADER_LEVEL_TO_PX[labelSize || HEADER_SIZE_TO_NUMBER[panelSize]]) !== null && _b !== void 0 ? _b : HEADER_LEVEL_TO_PX[3];
+    var labelNaturalPx = (_b = sizes_1.HEADER_LEVEL_TO_PX[labelSize || sizes_1.HEADER_SIZE_TO_NUMBER[panelSize]]) !== null && _b !== void 0 ? _b : sizes_1.HEADER_LEVEL_TO_PX[3];
     /**
      * SECOND thing to give: the title's size. Once the actions are down to icons and the
      * row is still short, the title shrinks toward a floor rather than dropping characters
@@ -783,18 +831,18 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
      * way it always has. When it IS cut, that same click must not reach the bar — opening the
      * text and folding the panel away in one gesture is the worst of both.
      */
-    var _10 = useState(false), isDescriptionExpanded = _10[0], setIsDescriptionExpanded = _10[1];
-    var _11 = useState(false), isDescriptionTruncated = _11[0], setIsDescriptionTruncated = _11[1];
-    var descriptionRef = useRef(null);
+    var _10 = (0, react_2.useState)(false), isDescriptionExpanded = _10[0], setIsDescriptionExpanded = _10[1];
+    var _11 = (0, react_2.useState)(false), isDescriptionTruncated = _11[0], setIsDescriptionTruncated = _11[1];
+    var descriptionRef = (0, react_2.useRef)(null);
     var descriptionIsClamped = descriptionClamp > 0 && !isDescriptionExpanded;
-    useLayoutEffect(function () {
+    (0, react_2.useLayoutEffect)(function () {
         var el = descriptionRef.current;
         // `scrollHeight` is what the text wants, `clientHeight` what the clamp left it. Re-read
         // whenever the bar's width moves, because that is what changes how many lines it takes.
         setIsDescriptionTruncated(descriptionIsClamped && !!el && el.scrollHeight > el.clientHeight + 1);
     }, [description, descriptionIsClamped, width]);
     var descriptionIsInteractive = isDescriptionTruncated || isDescriptionExpanded;
-    var handleDescriptionClick = useCallback(function (event) {
+    var handleDescriptionClick = (0, react_2.useCallback)(function (event) {
         if (!descriptionIsInteractive) {
             return;
         }
@@ -817,8 +865,8 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
             style: { cursor: 'pointer' },
         }
         : {}));
-    var _12 = useState(undefined), labelAvailable = _12[0], setLabelAvailable = _12[1];
-    var _13 = useFitTextSize({
+    var _12 = (0, react_2.useState)(undefined), labelAvailable = _12[0], setLabelAvailable = _12[1];
+    var _13 = (0, useFitTextSize_1.useFitTextSize)({
         text: typeof label === 'string' ? label : '',
         available: labelAvailable,
         max: labelNaturalPx,
@@ -829,7 +877,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
     /** Only while the title is actually below its natural size, and never over a caller who
      *  pinned the description's own size. */
     var descriptionFontPx = fitLabel && !(descriptionEffect === null || descriptionEffect === void 0 ? void 0 : descriptionEffect.textSize) && labelFitPx < labelNaturalPx
-        ? Math.max(FIT_TEXT_FLOOR_PX, Math.round(((_c = TEXT_FROM_SIZE[panelSize]) !== null && _c !== void 0 ? _c : TEXT_FROM_SIZE.normal) * (labelFitPx / labelNaturalPx)))
+        ? Math.max(useFitTextSize_1.FIT_TEXT_FLOOR_PX, Math.round(((_c = sizes_1.TEXT_FROM_SIZE[panelSize]) !== null && _c !== void 0 ? _c : sizes_1.TEXT_FROM_SIZE.normal) * (labelFitPx / labelNaturalPx)))
         : 0;
     /**
      * How much room the title has, computed rather than measured off its own box.
@@ -864,7 +912,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
      * the text does fit, the parent has slack and the fit returns the natural size, which is
      * the right answer either way.
      */
-    useLayoutEffect(function () {
+    (0, react_2.useLayoutEffect)(function () {
         var node = labelFitRef.current;
         var parent = node === null || node === void 0 ? void 0 : node.parentElement;
         if (!fitLabel || !node || !parent) {
@@ -881,10 +929,10 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         var next = Math.max(0, Math.round(parent.clientWidth - padding - siblings - gaps));
         setLabelAvailable(function (current) { return (current === next ? current : next); });
     }, [fitLabel, label, width, badge, actions, panelSize, description, clampLines]);
-    var iconTooltip = useMemo(function () { return ({
+    var iconTooltip = (0, react_2.useMemo)(function () { return ({
         content: label,
     }); }, [label]);
-    var handleRef = useCallback(function (ref) {
+    var handleRef = (0, react_2.useCallback)(function (ref) {
         var _ref = ref;
         if (ref === null || ref === void 0 ? void 0 : ref.resizable) {
             _ref = ref.resizable;
@@ -892,14 +940,14 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
         targetRef.current = _ref;
     }, []);
     if (skeleton) {
-        return _jsx(ReqorePanelSkeleton, { size: panelSize, isCollapsed: _isCollapsed });
+        return (0, jsx_runtime_1.jsx)(exports.ReqorePanelSkeleton, { size: panelSize, isCollapsed: _isCollapsed });
     }
-    return (_jsx(ReqoreErrorBoundary, __assign({}, errorBoundaryOptions, { children: _jsxs(ReqoreTooltipComponent, __assign({}, omit(rest, ['onResize']), _resizable, { as: rest.as || (!!resizable && !disabled && !_isCollapsed) ? Resizable : 'div', isCollapsed: _isCollapsed, rounded: rounded, flat: flat, intent: intent, accentPosition: accentPosition, "$accentSize": accentSizePx, className: "".concat(className || '', " reqore-panel").concat(_isHovered && size(floatingActionsList) > 0 ? ' reqore-panel-floating-active' : ''), interactive: interactive, theme: theme, effect: transformedContentEffect, opacity: opacity, fluid: fluid, disabled: disabled, Component: StyledPanel, ref: function (node) {
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ReqoreErrorBoundary, __assign({}, errorBoundaryOptions, { children: (0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, (0, lodash_1.omit)(rest, ['onResize']), _resizable, { as: rest.as || (!!resizable && !disabled && !_isCollapsed) ? re_resizable_1.Resizable : 'div', isCollapsed: _isCollapsed, rounded: rounded, flat: flat, intent: intent, accentPosition: accentPosition, "$accentSize": accentSizePx, className: "".concat(className || '', " reqore-panel").concat(_isHovered && (0, lodash_1.size)(floatingActionsList) > 0 ? ' reqore-panel-floating-active' : ''), interactive: interactive, theme: theme, effect: transformedContentEffect, opacity: opacity, fluid: fluid, disabled: disabled, Component: exports.StyledPanel, ref: function (node) {
                 handleRef(node);
                 panelRef.current = node;
-            }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [rest.stickyHeader ? (_jsx("div", { ref: stickySentinelRef, "aria-hidden": 'true', style: { height: 0 } })) : null, _isHovered &&
-                    size(floatingActionsList) > 0 &&
-                    createPortal(_jsx(StyledFloatingActions, { className: 'reqore-panel-floating-actions', theme: theme, size: panelSize, intent: intent, flat: flat, ref: floatingActionsRef, onMouseLeave: handleFloatingActionsMouseLeave, children: _jsx(ReqoreControlGroup, { size: panelSize, gapSize: panelSize, children: floatingActionsList.map(function (action, index) { return renderActions(action, index, true); }) }) }), document.body), hasTitleBar && (_jsxs(StyledPanelTopBar, { flat: flat, isCollapsed: _isCollapsed, collapsible: collapsible, className: 'reqore-panel-title', onClick: handleCollapseClick, theme: theme, minimal: minimal || opacity === 0, size: contentSize || panelSize, opacity: minimal ? 0 : opacity !== null && opacity !== void 0 ? opacity : 1, noHorizontalPadding: noHorizontalPadding, responsive: responsiveTitle, "$descriptionBelow": descriptionBelow, "$descriptionMaxLines": descriptionIsClamped ? descriptionClamp : 0, "$descriptionFontPx": descriptionFontPx, "data-narrow": isNarrow ? 'true' : 'false', ref: measureRef, padded: padded, wrapperPadding: wrapperPadding, intent: intent, rounded: rounded, radiusSize: rest.radiusSize, stickyHeader: rest.stickyHeader, stickyHeaderOffset: rest.stickyHeaderOffset, stickyHeaderInset: stickyInset, isStuck: isHeaderStuck, children: [hasTitleHeader && (_jsxs(StyledPanelTitleHeader, { className: 'reqore-panel-title-header', children: [breadcrumbs ? (_jsx(ReqoreBreadcrumbs, __assign({}, breadcrumbs, { padded: false, margin: 'none', flat: true, responsive: true }))) : icon || iconImage || label || badge ? ((function () {
+            }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [rest.stickyHeader ? ((0, jsx_runtime_1.jsx)("div", { ref: stickySentinelRef, "aria-hidden": 'true', style: { height: 0 } })) : null, _isHovered &&
+                    (0, lodash_1.size)(floatingActionsList) > 0 &&
+                    (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.StyledFloatingActions, { className: 'reqore-panel-floating-actions', theme: theme, size: panelSize, intent: intent, flat: flat, ref: floatingActionsRef, onMouseLeave: handleFloatingActionsMouseLeave, children: (0, jsx_runtime_1.jsx)(ControlGroup_1.default, { size: panelSize, gapSize: panelSize, children: floatingActionsList.map(function (action, index) { return renderActions(action, index, true); }) }) }), document.body), hasTitleBar && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTopBar, { flat: flat, isCollapsed: _isCollapsed, collapsible: collapsible, className: 'reqore-panel-title', onClick: handleCollapseClick, theme: theme, minimal: minimal || opacity === 0, size: contentSize || panelSize, opacity: minimal ? 0 : (opacity !== null && opacity !== void 0 ? opacity : 1), noHorizontalPadding: noHorizontalPadding, responsive: responsiveTitle, "$descriptionBelow": descriptionBelow, "$descriptionMaxLines": descriptionIsClamped ? descriptionClamp : 0, "$descriptionFontPx": descriptionFontPx, "data-narrow": isNarrow ? 'true' : 'false', ref: measureRef, padded: padded, wrapperPadding: wrapperPadding, intent: intent, rounded: rounded, radiusSize: rest.radiusSize, stickyHeader: rest.stickyHeader, stickyHeaderOffset: rest.stickyHeaderOffset, stickyHeaderInset: stickyInset, isStuck: isHeaderStuck, children: [hasTitleHeader && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeader, { className: 'reqore-panel-title-header', children: [breadcrumbs ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, __assign({}, breadcrumbs, { padded: false, margin: 'none', flat: true, responsive: true }))) : icon || iconImage || label || badge ? ((function () {
                                     var hasPanelIcon = !!icon || !!iconImage || loading;
                                     // The icon takes the label's place, so there has to BE an icon. Without one
                                     // the label is the only thing identifying the panel and it stays put — a
@@ -928,10 +976,10 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
                                     // Inline → keep 'margin=right' so ReqoreIcon adds its
                                     // standard side-spacer between icon and label.
                                     var iconMargin = useOuterGrid ? undefined : 'right';
-                                    var panelIcon = hasPanelIcon ? (_jsx(ReqoreIcon, __assign({ size: "".concat(ICON_FROM_HEADER_SIZE[labelSize || HEADER_SIZE_TO_NUMBER[panelSize]], "px"), image: loading ? undefined : iconImage, margin: iconMargin, color: iconColor, tooltip: iconTooltip, effect: {
-                                            opacity: CONTROL_ICON_OPACITY,
+                                    var panelIcon = hasPanelIcon ? ((0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ size: "".concat(sizes_1.ICON_FROM_HEADER_SIZE[labelSize || sizes_1.HEADER_SIZE_TO_NUMBER[panelSize]], "px"), image: loading ? undefined : iconImage, margin: iconMargin, color: iconColor, tooltip: iconTooltip, effect: {
+                                            opacity: colors_1.CONTROL_ICON_OPACITY,
                                         } }, iconProps, { animation: loading ? 'spin' : iconProps === null || iconProps === void 0 ? void 0 : iconProps.animation, icon: loading ? "Loader".concat(loadingIconType || '', "Line") : icon || (iconProps === null || iconProps === void 0 ? void 0 : iconProps.icon), className: "reqore-panel-title-icon ".concat((iconProps === null || iconProps === void 0 ? void 0 : iconProps.className) || '').trim() }))) : null;
-                                    var labelRow = (_jsxs(StyledPanelTitleHeaderLabelAndBadge, { className: 'reqore-panel-title-label-row', children: [inlineWithLabel && panelIcon, hideTitleText ? null : typeof label === 'string' ? (
+                                    var labelRow = ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeaderLabelAndBadge, { className: 'reqore-panel-title-label-row', children: [inlineWithLabel && panelIcon, hideTitleText ? null : typeof label === 'string' ? (
                                             // The measured box is this wrapper, not the heading: as a
                                             // `min-width: 0` flex child it reports the width the row actually
                                             // left for the title, where the heading would report what the text
@@ -940,7 +988,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
                                             // the inline-flex heading: a block wrapper adds the row's leading on
                                             // top of the heading's own box, which made a `tiny` panel 3px taller
                                             // than it was before this wrapper existed.
-                                            _jsx(StyledPanelTitleLabelBox, { ref: labelFitRef, className: 'reqore-panel-title-label-box', "$clampLines": clampLines, children: _jsx(LabelEditor, { size: labelSize || panelSize, customTheme: theme, effect: __assign({ 
+                                            (0, jsx_runtime_1.jsx)(StyledPanelTitleLabelBox, { ref: labelFitRef, className: 'reqore-panel-title-label-box', "$clampLines": clampLines, children: (0, jsx_runtime_1.jsx)(LabelEditor_1.LabelEditor, { size: labelSize || panelSize, customTheme: theme, effect: __assign({ 
                                                         // `noWrap` pins the heading to one line; a clamped title is
                                                         // allowed to wrap, and the clamp brings its own ellipsis.
                                                         noWrap: clampLines === 1 }, labelEffect), style: __assign(__assign(__assign({}, (clampLines > 1
@@ -952,7 +1000,7 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
                                                         // wrapper clips it mid-word with no ellipsis at all.
                                                         maxWidth: '100%' }), (fitLabel !== false && !(labelEffect === null || labelEffect === void 0 ? void 0 : labelEffect.textSize)
                                                         ? { fontSize: "".concat(labelFitPx, "px") }
-                                                        : {})), label: label, onSubmit: onLabelEdit, tooltip: showLabelTooltip ? customLabelTooltip || label : undefined }) })) : (label), badge || badge === 0 ? (_jsx(ButtonBadge, { size: getOneHigherSize(panelSize), content: badge, wrapGroup: isSmall, margin: label ? 'left' : 'none' })) : null] }));
+                                                        : {})), label: label, onSubmit: onLabelEdit, tooltip: showLabelTooltip ? customLabelTooltip || label : undefined }) })) : (label), badge || badge === 0 ? ((0, jsx_runtime_1.jsx)(Button_1.ButtonBadge, { size: (0, utils_1.getOneHigherSize)(panelSize), content: badge, wrapGroup: isSmall, margin: label ? 'left' : 'none' })) : null] }));
                                     // Description size is driven by the panel size only —
                                     // explicitly NOT by `labelSize`. `NUMBER_TO_SIZE` maps
                                     // 1..6 → micro..huge, which means bumping `labelSize`
@@ -961,15 +1009,15 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
                                     // pairing: a bigger label should not make supporting
                                     // text smaller. Consumers that want to size the
                                     // description explicitly pass `descriptionEffect.textSize`.
-                                    var descriptionRow = description && !hideTitleText && !descriptionBelow ? (_jsx(ReqoreSpan, __assign({}, descriptionProps, { children: description }))) : null;
-                                    return (_jsx(StyledPanelTitleHeaderContent, __assign({ size: panelSize }, labelProps, { hasLabel: !!label && !hideTitleText, hasIcon: useOuterGrid, iconSize: ICON_FROM_HEADER_SIZE[labelSize || HEADER_SIZE_TO_NUMBER[panelSize]], "$hasOuterIcon": useOuterGrid, "$iconVerticalAlign": iconVerticalAlign, "$hasDescription": !!description && !hideTitleText, children: useOuterGrid ? (_jsxs(_Fragment, { children: [panelIcon, labelRow, descriptionRow] })) : (_jsxs(StyledPanelTitleHeaderLabelAndDescription, { children: [labelRow, descriptionRow] })) })));
-                                })()) : null, breadcrumbs && (badge || badge === 0) ? (_jsx(ButtonBadge, { size: getOneHigherSize(panelSize), content: badge, wrapGroup: isSmall, margin: label ? 'left' : 'none' })) : null, _jsx(ReqorePanelNonResponsiveActions
+                                    var descriptionRow = description && !hideTitleText && !descriptionBelow ? ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, __assign({}, descriptionProps, { children: description }))) : null;
+                                    return ((0, jsx_runtime_1.jsx)(exports.StyledPanelTitleHeaderContent, __assign({ size: panelSize }, labelProps, { hasLabel: !!label && !hideTitleText, hasIcon: useOuterGrid, iconSize: sizes_1.ICON_FROM_HEADER_SIZE[labelSize || sizes_1.HEADER_SIZE_TO_NUMBER[panelSize]], "$hasOuterIcon": useOuterGrid, "$iconVerticalAlign": iconVerticalAlign, "$hasDescription": !!description && !hideTitleText, children: useOuterGrid ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [panelIcon, labelRow, descriptionRow] })) : ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeaderLabelAndDescription, { children: [labelRow, descriptionRow] })) })));
+                                })()) : null, breadcrumbs && (badge || badge === 0) ? ((0, jsx_runtime_1.jsx)(Button_1.ButtonBadge, { size: (0, utils_1.getOneHigherSize)(panelSize), content: badge, wrapGroup: isSmall, margin: label ? 'left' : 'none' })) : null, (0, jsx_runtime_1.jsx)(NonResponsiveActions_1.ReqorePanelNonResponsiveActions
                                 // The narrow bar keeps its controls in the trailing group, so this row —
                                 // which existed only for the stacked layout — never shows.
                                 , { 
                                     // The narrow bar keeps its controls in the trailing group, so this row —
                                     // which existed only for the stacked layout — never shows.
-                                    show: false, isSmall: false, showControlButtons: true, size: panelSize, hasResponsiveActions: hasResponsiveActions(nonFloatingActions), customTheme: theme, isCollapsed: _isCollapsed, onCollapseClick: collapsible ? handleCollapseClick : undefined, onCloseClick: onClose, closeButtonProps: closeButtonProps, collapseButtonProps: collapseButtonProps, collapseTooltip: collapseTooltip, expandTooltip: expandTooltip, closeTooltip: closeTooltip, fluid: false, style: { marginLeft: 'auto' } })] })), hasResponsiveActions(nonFloatingActions) && (_jsx(ReqoreControlGroup, __assign({ responsive: responsiveActions, 
+                                    show: false, isSmall: false, showControlButtons: true, size: panelSize, hasResponsiveActions: hasResponsiveActions(nonFloatingActions), customTheme: theme, isCollapsed: _isCollapsed, onCollapseClick: collapsible ? handleCollapseClick : undefined, onCloseClick: onClose, closeButtonProps: closeButtonProps, collapseButtonProps: collapseButtonProps, collapseTooltip: collapseTooltip, expandTooltip: expandTooltip, closeTooltip: closeTooltip, fluid: false, style: { marginLeft: 'auto' } })] })), hasResponsiveActions(nonFloatingActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, __assign({ responsive: responsiveActions, 
                             // Not fluid by default. `fluid` emits `width: 100%`, so the group's flex basis
                             // becomes the whole bar and the title — the only shrinkable thing on the other
                             // side — collapses to nothing: measured at 0px of title on a 400px panel, and
@@ -1005,11 +1053,11 @@ export var ReqorePanel = forwardRef(function (_a, ref) {
                                 // but only while there is a title header to take it FROM. With no label,
                                 // badge, icon or breadcrumbs the bar is the group's alone, and holding a
                                 // Collection's search input to half of an empty bar guards nothing.
-                                maxWidth: hasTitleHeader ? '50%' : undefined }, responsiveActionsWrapperProps === null || responsiveActionsWrapperProps === void 0 ? void 0 : responsiveActionsWrapperProps.style), children: nonFloatingActions.map(renderResponsiveActions()) }))), _jsx(ReqorePanelNonResponsiveActions, { show: showNonResponsiveGroup(), isSmall: false, showControlButtons: true, size: panelSize, hasResponsiveActions: hasResponsiveActions(nonFloatingActions), customTheme: theme, isCollapsed: _isCollapsed, onCollapseClick: collapsible ? handleCollapseClick : undefined, onCloseClick: onClose, closeButtonProps: closeButtonProps, collapseButtonProps: collapseButtonProps, collapseTooltip: collapseTooltip, expandTooltip: expandTooltip, closeTooltip: closeTooltip, fluid: !hasTitleHeader, children: nonFloatingActions.map(renderNonResponsiveActions()) }), descriptionBelow ? (
+                                maxWidth: hasTitleHeader ? '50%' : undefined }, responsiveActionsWrapperProps === null || responsiveActionsWrapperProps === void 0 ? void 0 : responsiveActionsWrapperProps.style), children: nonFloatingActions.map(renderResponsiveActions()) }))), (0, jsx_runtime_1.jsx)(NonResponsiveActions_1.ReqorePanelNonResponsiveActions, { show: showNonResponsiveGroup(), isSmall: false, showControlButtons: true, size: panelSize, hasResponsiveActions: hasResponsiveActions(nonFloatingActions), customTheme: theme, isCollapsed: _isCollapsed, onCollapseClick: collapsible ? handleCollapseClick : undefined, onCloseClick: onClose, closeButtonProps: closeButtonProps, collapseButtonProps: collapseButtonProps, collapseTooltip: collapseTooltip, expandTooltip: expandTooltip, closeTooltip: closeTooltip, fluid: !hasTitleHeader, children: nonFloatingActions.map(renderNonResponsiveActions()) }), descriptionBelow ? (
                         // `flex-basis: 100%` is what puts it on its own line — the bar is a wrapping
                         // flex row, so a full-width item cannot share one with anything before it.
                         // `min-width: 0` so a long sentence wraps inside the bar instead of widening it.
-                        _jsx("div", { className: 'reqore-panel-title-description-row', style: { flex: '0 0 100%', minWidth: 0 }, children: _jsx(ReqoreSpan, __assign({}, descriptionProps, { children: description })) })) : null] })), !_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (_jsx(StyledPanelContent, { as: 'div', className: 'reqore-panel-content', hasLabel: !!hasTitleBar, hasBottomActions: hasBottomActions, isCollapsed: _isCollapsed, style: contentStyle, padded: padded, minimal: minimal || opacity === 0, size: contentSize || panelSize, ref: getContentRef, noHorizontalPadding: noHorizontalPadding, children: children })) : null, hasBottomActions && !_isCollapsed ? (_jsxs(StyledPanelBottomActions, { flat: flat, className: 'reqore-panel-bottom-actions', theme: theme, padded: padded, intent: intent, minimal: minimal || opacity === 0, opacity: minimal ? 0 : opacity !== null && opacity !== void 0 ? opacity : 1, size: contentSize || panelSize, noHorizontalPadding: noHorizontalPadding, children: [hasNonResponsiveActions(leftBottomActions) ? (_jsx(ReqoreControlGroup, { size: panelSize, style: { marginRight: 'auto' }, children: leftBottomActions.map(renderNonResponsiveActions('flex-start')) })) : null, hasResponsiveActions(leftBottomActions) && (_jsx(ReqoreControlGroup, { fluid: responsiveActions, responsive: responsiveActions, customTheme: theme, size: panelSize, style: { marginRight: 'auto' }, children: leftBottomActions.map(renderResponsiveActions('flex-start')) })), hasResponsiveActions(rightBottomActions) && (_jsx(ReqoreControlGroup, { fluid: responsiveActions, horizontalAlign: 'flex-end', responsive: responsiveActions, customTheme: theme, style: { marginLeft: 'auto' }, size: panelSize, children: rightBottomActions.map(renderResponsiveActions()) })), hasNonResponsiveActions(rightBottomActions) ? (_jsx(ReqoreControlGroup, { horizontalAlign: 'flex-end', size: panelSize, style: { marginLeft: 'auto' }, children: rightBottomActions.map(renderNonResponsiveActions()) })) : null] })) : null] })) })));
+                        (0, jsx_runtime_1.jsx)("div", { className: 'reqore-panel-title-description-row', style: { flex: '0 0 100%', minWidth: 0 }, children: (0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, __assign({}, descriptionProps, { children: description })) })) : null] })), !_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? ((0, jsx_runtime_1.jsx)(exports.StyledPanelContent, { as: 'div', className: 'reqore-panel-content', hasLabel: !!hasTitleBar, hasBottomActions: hasBottomActions, isCollapsed: _isCollapsed, style: contentStyle, padded: padded, minimal: minimal || opacity === 0, size: contentSize || panelSize, ref: getContentRef, noHorizontalPadding: noHorizontalPadding, children: children })) : null, hasBottomActions && !_isCollapsed ? ((0, jsx_runtime_1.jsxs)(exports.StyledPanelBottomActions, { flat: flat, className: 'reqore-panel-bottom-actions', theme: theme, padded: padded, intent: intent, minimal: minimal || opacity === 0, opacity: minimal ? 0 : (opacity !== null && opacity !== void 0 ? opacity : 1), size: contentSize || panelSize, noHorizontalPadding: noHorizontalPadding, children: [hasNonResponsiveActions(leftBottomActions) ? ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { size: panelSize, style: { marginRight: 'auto' }, children: leftBottomActions.map(renderNonResponsiveActions('flex-start')) })) : null, hasResponsiveActions(leftBottomActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { fluid: responsiveActions, responsive: responsiveActions, customTheme: theme, size: panelSize, style: { marginRight: 'auto' }, children: leftBottomActions.map(renderResponsiveActions('flex-start')) })), hasResponsiveActions(rightBottomActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { fluid: responsiveActions, horizontalAlign: 'flex-end', responsive: responsiveActions, customTheme: theme, style: { marginLeft: 'auto' }, size: panelSize, children: rightBottomActions.map(renderResponsiveActions()) })), hasNonResponsiveActions(rightBottomActions) ? ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { horizontalAlign: 'flex-end', size: panelSize, style: { marginLeft: 'auto' }, children: rightBottomActions.map(renderNonResponsiveActions()) })) : null] })) : null] })) })));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30;
 //# sourceMappingURL=index.js.map