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

package/dist/components/Panel/index.cjs

@@ -1,1054 +0,0 @@
-"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;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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 styled_components_1 = __importStar(require("styled-components"));
-var colors_1 = require("../../constants/colors.cjs");
-var sizes_1 = require("../../constants/sizes.cjs");
-var colors_2 = require("../../helpers/colors.cjs");
-var styled_1 = require("../../helpers/styled.cjs");
-var utils_1 = require("../../helpers/utils.cjs");
-var useCombinedRefs_1 = require("../../hooks/useCombinedRefs.cjs");
-var useReqoreContext_1 = require("../../hooks/useReqoreContext.cjs");
-var useFitTextSize_1 = require("../../hooks/useFitTextSize.cjs");
-var useTheme_1 = require("../../hooks/useTheme.cjs");
-var styles_1 = require("../../styles.cjs");
-var Breadcrumbs_1 = __importDefault(require("../Breadcrumbs/index.cjs"));
-var Button_1 = __importStar(require("../Button/index.cjs"));
-var item_1 = require("../Collection/item.cjs");
-var ControlGroup_1 = __importDefault(require("../ControlGroup/index.cjs"));
-var Dropdown_1 = __importDefault(require("../Dropdown/index.cjs"));
-var Effect_1 = require("../Effect/index.cjs");
-var ErrorBoundary_1 = require("../ErrorBoundary/index.cjs");
-var Icon_1 = __importDefault(require("../Icon/index.cjs"));
-var Skeleton_1 = require("../Skeleton/index.cjs");
-var Span_1 = require("../Span/index.cjs");
-var TooltipComponent_1 = require("../TooltipComponent/index.cjs");
-var LabelEditor_1 = require("./LabelEditor.cjs");
-var NonResponsiveActions_1 = require("./NonResponsiveActions.cjs");
-var getPaddingSize = function (padded, 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
- *  stuck-detection observer to the right scroll container. */
-var getScrollableAncestor = function (node) {
-    var _a;
-    var el = (_a = node === null || node === void 0 ? void 0 : node.parentElement) !== null && _a !== void 0 ? _a : null;
-    while (el) {
-        var overflowY = getComputedStyle(el).overflowY;
-        // `hidden` counts: it is a scroll container per spec and DOES capture a
-        // sticky descendant, even though it shows no scrollbar. Skipping it picks
-        // the wrong ancestor and measures the wrong inset below.
-        if (overflowY === 'auto' ||
-            overflowY === 'scroll' ||
-            overflowY === 'overlay' ||
-            overflowY === 'hidden') {
-            return el;
-        }
-        el = el.parentElement;
-    }
-    return null;
-};
-/** The distance from a scrollport's border-box top to the line a `position:
- *  sticky; top: 0` descendant actually pins to — its top padding. Sticky
- *  resolves against the scroll container's CONTENT box, so a padded scrollport
- *  parks the header below its own padding and content scrolls through the gap.
- *  Border is reported separately: it sits outside the scrollport and so shifts
- *  the reference the stuck-detector measures against, but not the sticky line. */
-var getScrollportInset = function (el) {
-    if (!el)
-        return { padding: 0, border: 0 };
-    var style = getComputedStyle(el);
-    return {
-        padding: parseFloat(style.paddingTop) || 0,
-        border: parseFloat(style.borderTopWidth) || 0,
-    };
-};
-/**
- * The box the title lives in — and, when the title may wrap, the thing that clamps it.
- *
- * It exists first as a measuring box: as a `min-width: 0` flex child it reports the width the
- * row actually left for the title, where the heading itself would report what its text wants.
- * `overflow: hidden` is what makes it shrinkable at all, and `display: flex` keeps it from
- * 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_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 && (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);
-});
-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
-        ? (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;
-    if (hasIcon) {
-        width += iconSize;
-    }
-    return width;
-});
-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?
- *
- * `accentPosition` moves the intent onto the edge strip, so an accent panel never tints its
- * border — and a `flat` one draws no border at all, leaving the strip to carry the colour alone.
- *
- * This lives in one place because FOUR style rules branch on it — the border itself, the
- * interactive hover border, the `raised` inset highlight, and the sticky header's radius inset.
- * They were four separate copies of `flat && !intent`, and only the first was taught about
- * `accentPosition`, so hover repainted the intent border the strip had just removed and `raised`
- * silently vanished on accent panels.
- */
-var hasPanelBorder = function (_a) {
-    var flat = _a.flat, intent = _a.intent, accentPosition = _a.accentPosition;
-    return !(flat && (!intent || accentPosition));
-};
-/** The colour the panel border (and its hover variant) is derived from. With `accentPosition`
- *  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] : (0, colors_2.getMainBackgroundColor)(theme));
-};
-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: (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 (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 ? (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((0, colors_2.changeLightness)(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.08))
-        : undefined;
-}, function (_a) {
-    var theme = _a.theme;
-    return (0, colors_2.getReadableColor)(theme, undefined, undefined, true);
-}, function (_a) {
-    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;
-    }
-    // The wrapper normally clips the strip into its rounded corners via `overflow: hidden`
-    // (see the `overflow` rule below) — EXCEPT with a sticky header, which forces
-    // `overflow: visible` so the header can escape. Unclipped, a square strip pokes out past
-    // the panel's corners, so in THAT CASE ONLY the strip carries its own matching radius.
-    //
-    // Deliberately not applied unconditionally: where the wrapper already clips, a redundant
-    // radius re-renders the strip as a rounded box that is then clipped to the same curve —
-    // identical shape, but a different antialiasing blend along the whole edge, which shows up
-    // as a diff on every existing accent snapshot for no visual gain.
-    //
-    // 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, (0, sizes_1.resolveRadius)('normal', radiusSize) -
-            (hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition }) ? 1 : 0))
-        : 0;
-    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'
-            ? (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');
-}, function (_a) {
-    var blur = _a.blur, opacity = _a.opacity;
-    return (blur && opacity < 1 ? "blur(".concat(blur, "px)") : undefined);
-}, function (_a) {
-    var fluid = _a.fluid;
-    return (fluid ? '100%' : undefined);
-}, function (_a) {
-    var fluid = _a.fluid;
-    return (fluid ? '1 auto' : '0 0 auto');
-}, 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
-        ? (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
-            : (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 }) && styles_1.RaisedElement;
-}, function (_a) {
-    var fill = _a.fill, isCollapsed = _a.isCollapsed;
-    return !isCollapsed && fill
-        ? (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 && styles_1.DisabledElement;
-});
-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 && (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 && (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 && (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 (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((0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
-        : null;
-}, sizes_1.GAP_FROM_SIZE.normal, exports.StyledPanelTitleHeaderContent, styles_1.INACTIVE_ICON_SCALE, function (_a) {
-    var collapsible = _a.collapsible;
-    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 (0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.05), opacity);
-    });
-});
-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")
-        : minimal
-            ? "".concat(getPaddingSize(padded, size) / 2, "px")
-            : 0;
-}, function (_a) {
-    var minimal = _a.minimal, size = _a.size, padded = _a.padded, wrapperPadding = _a.wrapperPadding;
-    return wrapperPadding === 'bottom' || wrapperPadding === 'none'
-        ? undefined
-        : minimal
-            ? "".concat(getPaddingSize(padded, size), "px")
-            : undefined;
-}, function (_a) {
-    var stickyHeader = _a.stickyHeader;
-    return (stickyHeader ? 'sticky' : 'relative');
-}, function (_a) {
-    var stickyHeader = _a.stickyHeader, _b = _a.stickyHeaderOffset, stickyHeaderOffset = _b === void 0 ? 0 : _b, _c = _a.stickyHeaderInset, stickyHeaderInset = _c === void 0 ? 0 : _c;
-    return stickyHeader ? "".concat(stickyHeaderOffset - stickyHeaderInset, "px") : undefined;
-}, function (_a) {
-    var stickyHeader = _a.stickyHeader;
-    return (stickyHeader ? 2 : undefined);
-}, function (_a) {
-    var stickyHeader = _a.stickyHeader, rounded = _a.rounded, radiusSize = _a.radiusSize, flat = _a.flat, intent = _a.intent, accentPosition = _a.accentPosition, isStuck = _a.isStuck;
-    return stickyHeader && rounded
-        ? isStuck
-            ? '0px'
-            : "".concat(Math.max(0, (0, sizes_1.resolveRadius)('normal', radiusSize) -
-                (hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition }) ? 1 : 0)), "px")
-        : undefined;
-}, function (_a) {
-    var stickyHeader = _a.stickyHeader, rounded = _a.rounded, radiusSize = _a.radiusSize, flat = _a.flat, intent = _a.intent, accentPosition = _a.accentPosition, isStuck = _a.isStuck;
-    return stickyHeader && rounded
-        ? isStuck
-            ? '0px'
-            : "".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 (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 && (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    "])));
-});
-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")
-        : minimal
-            ? getPaddingSize(padded, size) / 2
-            : 0;
-}, function (_a) {
-    var minimal = _a.minimal, size = _a.size, padded = _a.padded, wrapperPadding = _a.wrapperPadding;
-    return wrapperPadding === 'top' || wrapperPadding === 'none'
-        ? undefined
-        : minimal
-            ? "".concat(getPaddingSize(padded, size), "px")
-            : undefined;
-}, function (_a) {
-    var theme = _a.theme, flat = _a.flat, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
-    return !flat
-        ? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
-        : null;
-});
-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) {
-    var padded = _a.padded, size = _a.size, noHorizontalPadding = _a.noHorizontalPadding;
-    return !padded
-        ? undefined
-        : noHorizontalPadding
-            ? "".concat(getPaddingSize(padded, size), "px 0")
-            : "".concat(getPaddingSize(padded, size), "px ").concat(getPaddingSize(padded, size), "px");
-}, function (_a) {
-    var size = _a.size;
-    return sizes_1.TEXT_FROM_SIZE[size];
-});
-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 sizes_1.PADDING_FROM_SIZE[size];
-}, function (_a) {
-    var theme = _a.theme;
-    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((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 (0, sizes_1.resolveRadius)(size, radiusSize);
-}, function (_a) {
-    var radiusSize = _a.radiusSize, size = _a.size;
-    return (0, sizes_1.resolveRadius)(size, radiusSize);
-}, function (_a) {
-    var size = _a.size;
-    return sizes_1.GAP_FROM_SIZE[size];
-});
-exports.ReqorePanelSkeleton = (0, react_2.memo)(function (_a) {
-    var size = _a.size, isCollapsed = _a.isCollapsed, children = _a.children;
-    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' }) })))] }));
-});
-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 = (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 = (0, useTheme_1.useReqoreTheme)('main', customTheme ||
-        (firstContentGradientColor && minimal ? { main: firstContentGradientColor } : undefined), undefined, undefined, inheritCustomTheme);
-    (0, react_2.useEffect)(function () {
-        return function () {
-            if (hoverTimerRef.current)
-                clearTimeout(hoverTimerRef.current);
-        };
-    }, []);
-    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
-    // its scroll container — at which point the header is pinned and sheds its
-    // top radius. Positions are read with getBoundingClientRect on scroll
-    // (rAF-throttled), NOT an IntersectionObserver: the observer's edge-of-root
-    // behaviour falsely reported "stuck" for panels that sit flush at their
-    // scroll container's top at rest. A document-level *capture* scroll listener
-    // catches scrolling in ANY ancestor container (page or a nested overflow
-    // box), so it works regardless of where the scroll lives; measuring the
-    // 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 = (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);
-            return undefined;
-        }
-        var sentinel = stickySentinelRef.current;
-        if (!sentinel)
-            return undefined;
-        var offset = (_a = rest.stickyHeaderOffset) !== null && _a !== void 0 ? _a : 0;
-        var scrollParent = getScrollableAncestor(sentinel);
-        var frame = 0;
-        // Read once per layout change, not per scroll frame: `measure()` runs in a
-        // rAF on every scroll and already forces a layout read.
-        var inset = getScrollportInset(scrollParent);
-        setStickyInset(inset.padding);
-        var measure = function () {
-            frame = 0;
-            var sentinelTop = sentinel.getBoundingClientRect().top;
-            // Border box plus the border, which is the line the compensated header
-            // 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;
-            // 1px deadzone so the exact at-rest position (sentinel flush against the
-            // top) never reads as stuck.
-            setIsHeaderStuck(sentinelTop < rootTop + offset - 1);
-        };
-        var onScroll = function () {
-            if (!frame)
-                frame = requestAnimationFrame(measure);
-        };
-        var onLayout = function () {
-            inset = getScrollportInset(scrollParent);
-            setStickyInset(inset.padding);
-            onScroll();
-        };
-        measure();
-        document.addEventListener('scroll', onScroll, { capture: true, passive: true });
-        window.addEventListener('resize', onLayout, { passive: true });
-        // Responsive padding changes the inset without a window resize or a
-        // scroll, and the header would stay compensated by the old value.
-        var observer = scrollParent && typeof ResizeObserver !== 'undefined'
-            ? new ResizeObserver(onLayout)
-            : undefined;
-        observer === null || observer === void 0 ? void 0 : observer.observe(scrollParent);
-        return function () {
-            document.removeEventListener('scroll', onScroll, true);
-            window.removeEventListener('resize', onLayout);
-            observer === null || observer === void 0 ? void 0 : observer.disconnect();
-            if (frame)
-                cancelAnimationFrame(frame);
-        };
-    }, [rest.stickyHeader, rest.stickyHeaderOffset]);
-    (0, react_use_1.useUpdateEffect)(function () {
-        setIsCollapsed(!!isCollapsed);
-    }, [isCollapsed]);
-    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();
-        var floatingRect = floatingActionsRef.current.getBoundingClientRect();
-        // Temporarily hide the floating actions from hit-testing so they don't
-        // block the elementFromPoint check on the panel
-        floatingActionsRef.current.style.pointerEvents = 'none';
-        var topRight = document.elementFromPoint(panelRect.right - 1, panelRect.top + 1);
-        floatingActionsRef.current.style.pointerEvents = '';
-        var isPanelTopVisible = topRight && (panelRef.current.contains(topRight) || topRight === panelRef.current);
-        if (!isPanelTopVisible) {
-            floatingActionsRef.current.style.display = 'none';
-            return;
-        }
-        floatingActionsRef.current.style.display = 'flex';
-        floatingActionsRef.current.style.top = "".concat(panelRect.top - floatingRect.height + (flat ? 0 : 1), "px");
-        floatingActionsRef.current.style.left = "".concat(panelRect.right - floatingRect.width, "px");
-    }, [flat]);
-    (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 = (0, react_2.useCallback)(function (e) {
-        var _a;
-        if (floatingActions) {
-            if (hoverTimerRef.current)
-                clearTimeout(hoverTimerRef.current);
-            hoverTimerRef.current = setTimeout(function () { return setIsHovered(true); }, 150);
-        }
-        (_a = rest.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-    }, [floatingActions, rest.onMouseEnter]);
-    var cancelHover = (0, react_2.useCallback)(function () {
-        if (hoverTimerRef.current) {
-            clearTimeout(hoverTimerRef.current);
-            hoverTimerRef.current = null;
-        }
-        setIsHovered(false);
-    }, []);
-    var handleMouseLeave = (0, react_2.useCallback)(function (e) {
-        var _a;
-        if (floatingActions) {
-            var relatedTarget = e.relatedTarget;
-            if (floatingActionsRef.current &&
-                relatedTarget instanceof Node &&
-                floatingActionsRef.current.contains(relatedTarget)) {
-                return;
-            }
-            cancelHover();
-        }
-        (_a = rest.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-    }, [floatingActions, rest.onMouseLeave, cancelHover]);
-    var handleFloatingActionsMouseLeave = (0, react_2.useCallback)(function (e) {
-        var relatedTarget = e.relatedTarget;
-        if (panelRef.current &&
-            relatedTarget instanceof Node &&
-            panelRef.current.contains(relatedTarget)) {
-            return;
-        }
-        cancelHover();
-    }, [cancelHover]);
-    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
-        // through the panel — spreading `enable` / `defaultSize` / … onto a div
-        // would emit invalid-DOM-attribute warnings. A non-resizable (or
-        // collapsed / disabled) panel therefore carries no resizable props.
-        var isResizableElement = !!resizable && !disabled && !_isCollapsed;
-        return isResizableElement && resizable ? resizable : {};
-    }, [resizable, _isCollapsed, disabled]);
-    // Return true if the card has a title bar, otherwise return false.
-    var hasTitleBar = (0, react_2.useMemo)(function () {
-        return !!label ||
-            !!breadcrumbs ||
-            collapsible ||
-            !!onClose ||
-            !!(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 = (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
-     * was narrow; the guard against that was `NODE_ENV !== 'test'`, added in 4eb8ac1 ("Test
-     * fixes") back when the suite was jsdom-only.
-     *
-     * That proxy stopped holding when snapshots moved to a real browser under vitest: same
-     * NODE_ENV, real widths, and the narrow layout switched off in the one place it needed to be
-     * on. No snapshot has ever shown a stacked title bar, which is why the stack going three rows
-     * deep on a drawer went unnoticed for so long (#664).
-     *
-     * 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 = (0, react_2.useMemo)(function () { return responsiveTitle && width > 0 && width < 480; }, [width, responsiveTitle]);
-    /**
-     * Narrow, from either trigger: the panel measuring under 480px, or the provider's
-     * viewport-level `isMobile`.
-     *
-     * A narrow title bar STAYS ON ONE ROW. The label ellipsizes (it already carries `noWrap`) and
-     * the responsive action group collapses into its overflow, which is what the "hidden when
-     * small" actions exist for. It used to stack instead — title on one row, actions on another,
-     * close/collapse on a third — and that cost more room than the title ever took: measured on a
-     * drawer at 375px, a 93px header for a title using 204px of the width, with a 359px action
-     * group holding a 106px button and 261px of nothing beside it.
-     *
-     * Stacking also broke the collapse it was supposed to help. Going to a column made the action
-     * group `fluid`, the group got a full-width row, and with that much space its own measurement
-     * decided fewer actions needed collapsing — so an action labelled "hidden when small" rendered
-     * in full on a small panel.
-     */
-    var isNarrow = isSmall || isMobile;
-    /**
-     * The tightest fallback, still opt-in: drop the title TEXT and leave the icon in its place.
-     * For a bar too narrow even to ellipsize into — a `[icon] [actions] [×]` header. Nothing
-     * changes without an icon to fall back to, and the label survives as that icon's tooltip.
-     */
-    /**
-     * The title gives up its space entirely and the icon stands in. Opt-in only: the automatic
-     * end of the cascade is the ellipsis, and dropping the title is a decision the caller makes,
-     * not something a width should take on their behalf. Needs an icon to fall back to.
-     */
-    var hideTitleForIcon = isNarrow && compactTitle;
-    // 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 = (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 = (0, react_2.useMemo)(function () { return bottomActions.filter(function (_a) {
-        var position = _a.position;
-        return position === 'left' || !position;
-    }); }, [bottomActions]);
-    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 = (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 = (0, react_2.useCallback)(function (align) {
-        if (align === void 0) { align = 'flex-end'; }
-        return function (action, index) {
-            return renderActions(action, index, true, align);
-        };
-    }, 
-    // `isNarrow` belongs here even though this callback does not name it: it wraps
-    // `renderActions`, which does. Without it the wrapper keeps whichever `renderActions`
-    // existed on the first render — when `useMeasure` still reported 0 and the bar did not
-    // yet know it was narrow — so a width-dependent decision inside it could never take
-    // 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 = (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
-    // prop defaulted to `true` and that arm was mostly dead.
-    function (data) {
-        return data.some(function (action) {
-            return (!responsiveActions || action.responsive === false) && action.show !== false;
-        });
-    }, [actions, bottomActions, responsiveActions, showActionsWhenCollapsed, _isCollapsed]);
-    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 = (0, react_2.useCallback)(function (align) {
-        if (align === void 0) { align = 'flex-end'; }
-        return function (action, index) {
-            return renderActions(action, index, false, align);
-        };
-    }, [
-        isNarrow,
-        actions,
-        bottomActions,
-        responsiveActions,
-        showActionsWhenCollapsed,
-        _isCollapsed,
-    ]);
-    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) ||
-            (includeResponsive && action.responsive === false) ||
-            (!includeResponsive &&
-                responsiveActions &&
-                (action.responsive === true || !('responsive' in action)))) {
-            return null;
-        }
-        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 = (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 ((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 ((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();
-                        (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                    }
-                    : undefined })));
-        }
-        // FIRST thing to go when the bar is short of room: the action's LABEL, not the
-        // panel's title. An action is a verb the icon already carries, and the label moves
-        // to the tooltip rather than being lost; the title is the only thing naming what
-        // this panel IS. Needs an icon to fall back to — an unlabelled, iconless button is
-        // 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.
-        var actionLabelTooltip = typeof label === 'number' ? String(label) : label;
-        var dropActionLabel = isNarrow && !!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();
-                    (_a = rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest);
-                }
-                : undefined }), dropActionLabel ? undefined : label));
-    }, [actions, theme, showActionsWhenCollapsed, _isCollapsed, isNarrow]);
-    var interactive = !!(rest.onClick ||
-        rest.onMouseOver ||
-        rest.onMouseEnter ||
-        rest.onDoubleClick ||
-        rest.onContextMenu);
-    var transformedContentEffect = (0, react_2.useMemo)(function () {
-        var newContentEffect = __assign({}, contentEffect);
-        if (newContentEffect.gradient && intent) {
-            newContentEffect.gradient = (0, Effect_1.patchPrimaryGradient)(newContentEffect.gradient, {
-                borderColor: theme.intents[intent],
-            });
-        }
-        newContentEffect.interactive = interactive;
-        return newContentEffect;
-    }, [intent, theme, contentEffect, interactive]);
-    var opacity = rest.transparent ? 0 : rest.opacity;
-    var noHorizontalPadding = opacity === 0 && flat && !intent && !rest.raised;
-    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
-        // to move to. This used to read `!isSmall`, which withheld them here because a small panel
-        // rendered its own row below — and that row is what the one-row treatment removed.
-        if (onClose || collapsible) {
-            show = true;
-        }
-        // OTHERWISE, ARE THERE ANY NON RESPONSIVE ACTIONS TO BE SHOWN?
-        // This either means actions where user specified responsive: false
-        // or user passed responsiveActions: false
-        if (hasNonResponsiveActions(nonFloatingActions)) {
-            show = true;
-        }
-        return show;
-    }, [collapsible, onClose, nonFloatingActions, hasNonResponsiveActions]);
-    /**
-     * 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 = 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
-     * — the end of a name is often the part that distinguishes it. Only at the floor does
-     * the existing `noWrap` ellipsis take over.
-     *
-     * Off when the caller pins `labelEffect.textSize`: they have said what size they want.
-     */
-    /**
-     * The width the layout left for the title, observed on the box that claims the leftover
-     * space. Kept as state rather than read during render so the fit is calculated from a width
-     * that has actually been laid out.
-     */
-    /** Whole lines, at least one — a fractional or zero `labelMaxLines` is a caller slip, not
-     *  a request for half a line of text. */
-    var clampLines = Math.max(1, Math.floor(labelMaxLines) || 1);
-    /** `compactTitle` drops the description with the title it belongs to, so a bar that has
-     *  given up its title never grows a row to carry one. */
-    var descriptionBelow = descriptionPosition === 'below' && !!description && !(hideTitleForIcon && !!icon);
-    var descriptionClamp = Math.max(0, Math.floor(descriptionMaxLines || 0));
-    /**
-     * A clamped description opens on click so the whole of it can be read — on a phone there is
-     * no hover to reveal it with, and two lines of a long sentence are an invitation to tap.
-     *
-     * Interactive only while it is actually cut, or already open: a description that fits is
-     * left alone, so a click on it still reaches the bar and collapses a collapsible panel the
-     * 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 = (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;
-    (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 = (0, react_2.useCallback)(function (event) {
-        if (!descriptionIsInteractive) {
-            return;
-        }
-        event.stopPropagation();
-        setIsDescriptionExpanded(function (expanded) { return !expanded; });
-    }, [descriptionIsInteractive]);
-    /** Shared by both places the description can render — inline with the title, or on its
-     *  own row below — so the two cannot drift apart. */
-    var descriptionProps = __assign({ ref: descriptionRef, className: 'reqore-panel-title-description', size: panelSize, effect: __assign({ opacity: 0.7 }, descriptionEffect), intent: descriptionIntent, onClick: handleDescriptionClick }, (descriptionIsInteractive
-        ? {
-            role: 'button',
-            tabIndex: 0,
-            'aria-expanded': isDescriptionExpanded,
-            onKeyDown: function (event) {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    handleDescriptionClick(event);
-                }
-            },
-            style: { cursor: 'pointer' },
-        }
-        : {}));
-    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,
-        min: labelMinTextSize,
-        lines: clampLines,
-        enabled: fitLabel !== false && typeof label === 'string' && !(labelEffect === null || labelEffect === void 0 ? void 0 : labelEffect.textSize),
-    }), labelFitRef = _13[0], labelFitPx = _13[1];
-    /** 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(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.
-     *
-     * The box the title sits in is sized by its content, so measuring THAT is circular — the
-     * font shrinks, the box shrinks, and the size ratchets to the floor. Measuring the space it
-     * COULD have is not: take the bar, subtract everything competing with the title, and what
-     * is left does not move when the title's font does.
-     *
-     * Everything competing with it is text-independent: the action groups and control buttons
-     * (the bar's other children), and the icon and badge that share the title's row. The action
-     * group is `fluid` by default and would otherwise swallow the leftover, which is why this
-     * cannot be solved by giving the title column `flex-grow` — it competes with a group that
-     * is designed to take the rest, and loses.
-     *
-     * Re-run on `width`, which is the bar's own measured width: when the bar resizes, so does
-     * everything in it.
-     */
-    /**
-     * The title's available width is its CONTAINING BLOCK minus whatever shares it — measured,
-     * not reconstructed.
-     *
-     * This used to subtract the action group, the gaps and the icon from the bar's width. That
-     * arithmetic held only for the one layout it was written against: give the panel a
-     * `description` and the icon moves into an outer grid, so the sum over-reported by 30-80px
-     * and the fit under-shrank. The symptom was the worst of both worlds — a title both smaller
-     * AND ellipsized, which is the one outcome the feature exists to avoid.
-     *
-     * Measuring the parent is safe precisely where it looks circular. While the text overflows
-     * — the only regime in which anything shrinks — the parent is pinned by the row, not by the
-     * text: at a 300px bar it measures 128px at 19px, at 16px, and wrapped to two lines. When
-     * the text does fit, the parent has slack and the fit returns the natural size, which is
-     * the right answer either way.
-     */
-    (0, react_2.useLayoutEffect)(function () {
-        var node = labelFitRef.current;
-        var parent = node === null || node === void 0 ? void 0 : node.parentElement;
-        if (!fitLabel || !node || !parent) {
-            return;
-        }
-        var style = getComputedStyle(parent);
-        var padding = (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);
-        var gap = parseFloat(style.columnGap) || parseFloat(style.gap) || 0;
-        // A badge sits beside the title in the same box and takes real width.
-        var siblings = Array.from(parent.children).reduce(function (total, child) {
-            return child === node ? total : total + child.getBoundingClientRect().width;
-        }, 0);
-        var gaps = gap * Math.max(0, parent.children.length - 1);
-        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 = (0, react_2.useMemo)(function () { return ({
-        content: label,
-    }); }, [label]);
-    var handleRef = (0, react_2.useCallback)(function (ref) {
-        var _ref = ref;
-        if (ref === null || ref === void 0 ? void 0 : ref.resizable) {
-            _ref = ref.resizable;
-        }
-        targetRef.current = _ref;
-    }, []);
-    if (skeleton) {
-        return (0, jsx_runtime_1.jsx)(exports.ReqorePanelSkeleton, { size: panelSize, isCollapsed: _isCollapsed });
-    }
-    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 ? ((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
-                                    // header with neither is not a compact header, it is an empty one. The label
-                                    // is not lost either way: it is already this icon's tooltip.
-                                    var hideTitleText = hideTitleForIcon && hasPanelIcon;
-                                    // Layout decision:
-                                    // - iconWithLabel=true → render the icon INSIDE the
-                                    //   label-and-badge row (no outer icon column). The
-                                    //   description sits flush-left under the icon+label.
-                                    // - When there is NO description, fall back to the
-                                    //   inline layout regardless of iconVerticalAlign — the
-                                    //   outer grid only earns its keep when there is a
-                                    //   description row to anchor against, and the inline
-                                    //   layout aligns icon-to-text glyphs more naturally
-                                    //   via the heading's own line-height.
-                                    // - Otherwise → outer two-column grid where the icon
-                                    //   sits in a reserved column. iconVerticalAlign places
-                                    //   the icon in row 1 (label), row 2 (description), or
-                                    //   spans both rows (center). The description always
-                                    //   indents past the icon column.
-                                    var inlineWithLabel = hasPanelIcon && (iconWithLabel || !description || hideTitleText);
-                                    var useOuterGrid = hasPanelIcon && !inlineWithLabel;
-                                    // Outer grid → grid column-gap handles icon→label
-                                    // spacing, so the icon itself takes no margin.
-                                    // Inline → keep 'margin=right' so ReqoreIcon adds its
-                                    // standard side-spacer between icon and label.
-                                    var iconMargin = useOuterGrid ? undefined : 'right';
-                                    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 = ((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
-                                            // wants. `overflow: hidden` is what makes it shrinkable at all.
-                                            // `display: flex` keeps the wrapper from 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 was before this wrapper existed.
-                                            (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
-                                                        ? {}
-                                                        : { display: 'inline-flex', alignItems: 'center' })), { minWidth: 0, 
-                                                        // Capped to the measured wrapper so the heading's own
-                                                        // `text-overflow: ellipsis` (from `noWrap`) has a box to overflow.
-                                                        // An `inline-flex` heading otherwise sizes to its text, and the
-                                                        // 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 ? ((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`
-                                    // from 4 to 2 to grow the heading would inversely
-                                    // shrink the description to `tiny`. That's the wrong
-                                    // 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 ? ((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) && ((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
-                            // 142px of a 518px bar where the buttons needed 90.
-                            //
-                            // A caller whose actions include something with no useful width of its own —
-                            // Collection puts a search input in here — opts back in through
-                            // `responsiveActionsWrapperProps`, because `fluid` is also what ControlGroup
-                            // propagates to its children, and that input has nothing to fill without it.
-                            fluid: false, horizontalAlign: 'flex-end', customTheme: theme, size: panelSize }, responsiveActionsWrapperProps, { 
-                            // The cap is the whole fix. Half the bar guarantees the title the other half,
-                            // and the moment the buttons need more than their share the group overflows —
-                            // which is what `responsive` collapse watches (`scrollWidth > clientWidth`), so
-                            // the fold into the `…` menu still fires. Floored at 40px because shrinking to
-                            // nothing clips the buttons rather than folding them, and ControlGroup ignores
-                            // its own overflow below that width, which would strand them clipped.
-                            style: __assign({ 
-                                // Pushed to the trailing edge. A `fluid` group used to span the bar and its
-                                // own `horizontalAlign` put the buttons on the right; a content-sized one is
-                                // only as wide as its buttons, so with no title header beside it — Tree has
-                                // no label — it would sit at the LEFT of an otherwise empty bar. `auto`
-                                // margin restores the edge without giving the group any width back.
-                                marginLeft: 'auto', 
-                                // Content basis that may still shrink. `fluid={false}` alone compiles to
-                                // `flex: 0 0 auto`, which pins the group at its content width so it can never
-                                // overflow — and `responsive` collapse watches `scrollWidth > clientWidth`,
-                                // so the fold into the `…` menu would simply stop happening.
-                                flex: '0 1 auto', 
-                                // Floored, because shrinking to nothing clips the buttons instead of folding
-                                // them, and ControlGroup ignores its own overflow below 40px.
-                                minWidth: 40, 
-                                // Capped, so a group that IS opted back into growing cannot take the row —
-                                // 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()) }))), (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.
-                        (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.cjs.map