@qoretechnologies/reqore 0.78.5-pr.708.gbe112f0 → 0.78.6-pr.715.gdfefa70

package/dist/components/Panel/index.js

@@ -58,20 +58,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 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.StyledPanelMedia = exports.StyledPanelContent = exports.StyledPanelBottomActions = exports.StyledPanelTopBar = exports.StyledPanelTitle = exports.StyledPanel = exports.REQORE_PANEL_STYLE_PROPS = exports.StyledPanelTitleHeaderLabelAndBadge = exports.StyledPanelTitleHeaderLabelAndDescription = exports.StyledPanelTitleHeaderContent = exports.StyledPanelTitleHeader = void 0;
+exports.ReqorePanel = exports.ReqorePanelSkeleton = exports.StyledFloatingActions = exports.StyledPanelMedia = 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"));
@@ -82,11 +73,11 @@ var react_2 = require("react");
 var react_dom_1 = require("react-dom");
 var react_use_1 = require("react-use");
 var responsive_1 = require("./responsive");
-var styled_components_1 = require("styled-components");
+var styled_components_1 = __importStar(require("styled-components"));
 var colors_1 = require("../../constants/colors");
 var sizes_1 = require("../../constants/sizes");
 var colors_2 = require("../../helpers/colors");
-var styled_1 = __importStar(require("../../helpers/styled"));
+var styled_1 = require("../../helpers/styled");
 var utils_1 = require("../../helpers/utils");
 var useCombinedRefs_1 = require("../../hooks/useCombinedRefs");
 var useReqoreContext_1 = require("../../hooks/useReqoreContext");
@@ -154,12 +145,12 @@ var getScrollportInset = function (el) {
  * opening a line box around the inline-flex heading — a block wrapper adds the row's leading on
  * top of the heading's own box, which made a `tiny` panel 3px taller than it used to be.
  */
-var StyledPanelTitleLabelBox = styled_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 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_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_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) {
+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) {
@@ -176,8 +167,8 @@ exports.StyledPanelTitleHeaderContent = styled_1.default.div(templateObject_9 ||
     }
     return width;
 });
-exports.StyledPanelTitleHeaderLabelAndDescription = styled_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_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"])));
+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?
  *
@@ -200,113 +191,51 @@ var getPanelBorderBaseColor = function (theme, _a) {
     var intent = _a.intent, accentPosition = _a.accentPosition;
     return (intent && !accentPosition ? theme.intents[intent] : (0, colors_2.getMainBackgroundColor)(theme));
 };
-/**
- * Every panel prop that only styles or configures the panel. None of them reaches the rendered
- * element — the `div`, re-resizable's `Resizable` (which spreads every prop it does not know onto
- * its wrapper div), or a component given as `as`. The compiler checks the record against
- * `IStyledPanel`, so a new prop that is not added here fails the build instead of leaking.
- *
- * re-resizable's own props (`size`, `enable`, `minWidth`, handles, ...) are not in it: they are
- * the `Resizable`'s to receive. `opacity` is the surface's background opacity, an SVG attribute
- * a `div` would keep.
- */
-exports.REQORE_PANEL_STYLE_PROPS = (0, styled_1.listReqoreStyleProps)({
-    accentPosition: true,
-    actions: true,
-    badge: true,
-    blur: true,
-    bottomActions: true,
-    breadcrumbs: true,
-    closeButtonProps: true,
-    closePopover: true,
-    closeTooltip: true,
-    collapseButtonProps: true,
-    collapseTooltip: true,
-    collapsible: true,
-    compactTitle: true,
-    contentEffect: true,
-    contentSize: true,
-    contentStyle: true,
-    customLabelTooltip: true,
-    customTheme: true,
-    description: true,
-    descriptionEffect: true,
-    descriptionIntent: true,
-    descriptionMaxLines: true,
-    descriptionPosition: true,
-    disabled: true,
-    errorBoundaryOptions: true,
-    expandTooltip: true,
-    fill: true,
-    fitLabel: true,
-    flat: true,
-    floatingActions: true,
-    fluid: true,
-    getContentRef: true,
-    icon: true,
-    iconColor: true,
-    iconImage: true,
-    iconProps: true,
-    iconVerticalAlign: true,
-    iconWithLabel: true,
-    inheritCustomTheme: true,
-    intent: true,
-    isCollapsed: true,
-    isStuck: true,
-    label: true,
-    labelEffect: true,
-    labelMaxLines: true,
-    labelMinTextSize: true,
-    labelProps: true,
-    labelSize: true,
-    loading: true,
-    loadingIconType: true,
-    media: true,
-    mediaAlt: true,
-    mediaAspectRatio: true,
-    mediaPosition: true,
-    mediaProps: true,
-    minimal: true,
-    noHorizontalPadding: true,
-    onClose: true,
-    onCollapseChange: true,
-    onLabelEdit: true,
-    opacity: true,
-    padded: true,
-    radiusSize: true,
-    raised: true,
-    resizable: true,
-    responsiveActions: true,
-    responsiveActionsWrapperProps: true,
-    responsiveTitle: true,
-    rounded: true,
-    showActionsWhenCollapsed: true,
-    showLabelTooltip: true,
-    skeleton: true,
-    stickyHeader: true,
-    stickyHeaderInset: true,
-    stickyHeaderOffset: true,
-    theme: true,
-    tooltip: true,
-    transparent: true,
-    unMountContentOnCollapse: true,
-    wrapperPadding: true,
-});
-exports.StyledPanel = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
-    // Its own props, `interactive` (set by the panel for its hover styles) and the layout flags a
-    // containing ControlGroup hands it — except `size`, which a panel never forwards but a
-    // `Resizable` reads as its own.
-    shouldForwardProp: styled_1.omitStyleProps.apply(void 0, __spreadArray(__spreadArray(__spreadArray([], exports.REQORE_PANEL_STYLE_PROPS, false), styled_1.REQORE_CONTROL_GROUP_CHILD_PROPS.filter(function (prop) { return prop !== 'size'; }), false), ['interactive'], false)),
+/** The title bar: a band a step lighter than the page — or, with `theme.panel` named, the
+ *  panel's own surface, set apart from the body by the hairline under it alone. */
+var getPanelHeaderColor = function (theme, hovered) {
+    var themed = (0, colors_2.getThemePanelSurface)(theme);
+    if (themed === null || themed === void 0 ? void 0 : themed.main) {
+        return hovered ? (0, colors_2.changeLightness)(themed.main, 0.02) : themed.main;
+    }
+    return (0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), hovered ? 0.05 : 0.03);
+};
+/** The resting border: the intent's colour when the intent tints the edge, else the hairline
+ *  (`theme.panel.border` when the theme names one). */
+var getPanelBorderColor = function (theme, _a) {
+    var intent = _a.intent, accentPosition = _a.accentPosition;
+    return intent && !accentPosition
+        ? (0, colors_2.changeLightness)(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.08)
+        : (0, colors_2.getPanelHairlineColor)(theme);
+};
+/** The border while the panel is hovered — a step brighter than at rest. */
+var getPanelHoverBorderColor = function (theme, _a) {
+    var intent = _a.intent, accentPosition = _a.accentPosition;
+    var themed = !(intent && !accentPosition) ? (0, colors_2.getThemePanelSurface)(theme) : undefined;
+    return (themed === null || themed === void 0 ? void 0 : themed.border)
+        ? (0, colors_2.changeLightness)(themed.border, 0.12)
+        : (0, colors_2.changeLightness)(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.25);
+};
+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.
+    // `opacity` is the surface's background opacity, an SVG attribute a `div` would keep; the
+    // remaining flags only style the surface, and re-resizable would write them onto its div.
+    shouldForwardProp: (0, styled_1.omitStyleProps)('accentPosition', 'fill', 'flat', 'fluid', 'interactive', 'isCollapsed', 'opacity', 'rounded'),
 })(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);
+    return (0, polished_1.rgba)((0, colors_2.getPanelBackgroundColor)(theme), 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))
+        ? "1px solid ".concat(getPanelBorderColor(theme, { intent: intent, accentPosition: accentPosition }))
         : undefined;
 }, function (_a) {
     var theme = _a.theme;
@@ -354,9 +283,9 @@ exports.StyledPanel = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
     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;
+            : (0, polished_1.rgba)((0, polished_1.darken)(0.025, (0, polished_1.rgba)((0, colors_2.getPanelBackgroundColor)(theme), opacity)), opacity), hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition })
+            ? getPanelHoverBorderColor(theme, { intent: intent, accentPosition: accentPosition })
+            : 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.getPanelBackgroundColor)(theme), 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;
@@ -368,7 +297,7 @@ exports.StyledPanel = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
     var disabled = _a.disabled;
     return disabled && styles_1.DisabledElement;
 });
-exports.StyledPanelTitle = styled_1.default.div.withConfig({
+exports.StyledPanelTitle = styled_components_1.default.div.withConfig({
     shouldForwardProp: (0, styled_1.omitStyleProps)('opacity'),
 })(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;
@@ -384,23 +313,23 @@ exports.StyledPanelTitle = styled_1.default.div.withConfig({
     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);
+    return (0, polished_1.rgba)(getPanelHeaderColor(theme), 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))
+        ? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.getPanelHairlineColor)(theme), 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);
+        return (0, polished_1.rgba)(getPanelHeaderColor(theme, true), opacity);
     });
 });
-exports.StyledPanelTopBar = (0, styled_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) {
+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")
@@ -441,13 +370,13 @@ exports.StyledPanelTopBar = (0, styled_1.default)(exports.StyledPanelTitle)(temp
         : 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);
+    return (0, polished_1.rgba)(getPanelHeaderColor(theme), 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_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) {
+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")
@@ -464,10 +393,10 @@ exports.StyledPanelBottomActions = (0, styled_1.default)(exports.StyledPanelTitl
 }, 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))
+        ? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.getPanelHairlineColor)(theme), opacity))
         : null;
 });
-exports.StyledPanelContent = styled_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) {
+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) {
@@ -484,7 +413,7 @@ exports.StyledPanelContent = styled_1.default.div(templateObject_29 || (template
 /** The media frame. Its outer corners take the panel's inner curve, so the media is clipped to
  *  the panel's shape even where the panel cannot clip it (a sticky header makes the panel
  *  overflow visible). */
-exports.StyledPanelMedia = styled_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"], ["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"])), function (_a) {
+exports.StyledPanelMedia = styled_components_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"], ["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"])), function (_a) {
     var $position = _a.$position, $radius = _a.$radius;
     return $position === 'top'
         ? (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __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        "])), $radius, $radius) : (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n          border-bottom-left-radius: ", "px;\n          border-bottom-right-radius: ", "px;\n        "], ["\n          border-bottom-left-radius: ", "px;\n          border-bottom-right-radius: ", "px;\n        "])), $radius, $radius);
@@ -492,12 +421,12 @@ exports.StyledPanelMedia = styled_1.default.div(templateObject_33 || (templateOb
     var $aspectRatio = _a.$aspectRatio;
     return $aspectRatio !== undefined && (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      aspect-ratio: ", ";\n\n      > img,\n      > video,\n      > picture,\n      > picture > img,\n      > svg,\n      > canvas,\n      > iframe {\n        height: 100%;\n        object-fit: cover;\n      }\n    "], ["\n      aspect-ratio: ", ";\n\n      > img,\n      > video,\n      > picture,\n      > picture > img,\n      > svg,\n      > canvas,\n      > iframe {\n        height: 100%;\n        object-fit: cover;\n      }\n    "])), $aspectRatio);
 });
-exports.StyledFloatingActions = styled_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"], ["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"])), function (_a) {
+exports.StyledFloatingActions = styled_components_1.default.div(templateObject_34 || (templateObject_34 = __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);
+    return (0, polished_1.rgba)((0, colors_2.getPanelBackgroundColor)(theme), 1);
 }, function (_a) {
     var theme = _a.theme, flat = _a.flat, intent = _a.intent;
     return flat && !intent
@@ -669,59 +598,6 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         }
         setIsHovered(false);
     }, []);
-    /* The way from the panel to its floating actions.
-     *
-     * The actions float above the panel's top-right corner, so a pointer heading for
-     * them from inside the panel leaves the panel through its top edge - usually to the
-     * LEFT of the actions, on a diagonal - and passes over what lies above the panel
-     * before it reaches them. Ending the hover the moment the pointer left the panel
-     * hid the actions on that way, and the click meant for them landed on what they had
-     * been covering (in reqraft's expression editor: the Visual / Text switch, so
-     * "Remove" switched the view instead).
-     *
-     * So while the pointer is in the strip between the panel's top edge and the top of
-     * the actions, across the panel's width, the hover stays; it ends when the pointer
-     * leaves that strip for anything that is neither the panel nor the actions. Decided
-     * by where the pointer IS, on each move - no timer to guess the time a person needs. */
-    var corridorUntrackRef = (0, react_2.useRef)(null);
-    var stopCorridor = (0, react_2.useCallback)(function () {
-        var _a;
-        (_a = corridorUntrackRef.current) === null || _a === void 0 ? void 0 : _a.call(corridorUntrackRef);
-        corridorUntrackRef.current = null;
-    }, []);
-    var inCorridor = (0, react_2.useCallback)(function (x, y) {
-        if (!panelRef.current || !floatingActionsRef.current)
-            return false;
-        if (floatingActionsRef.current.style.display === 'none')
-            return false;
-        var panelRect = panelRef.current.getBoundingClientRect();
-        var actionsRect = floatingActionsRef.current.getBoundingClientRect();
-        return (x >= Math.min(panelRect.left, actionsRect.left) &&
-            x <= Math.max(panelRect.right, actionsRect.right) &&
-            y >= actionsRect.top &&
-            y <= panelRect.top + 1);
-    }, []);
-    var followCorridor = (0, react_2.useCallback)(function () {
-        stopCorridor();
-        var onMove = function (event) {
-            var _a, _b;
-            var target = event.target instanceof Node ? event.target : null;
-            // reached the actions or came back into the panel: their own handlers take over
-            if (target &&
-                (((_a = floatingActionsRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) || ((_b = panelRef.current) === null || _b === void 0 ? void 0 : _b.contains(target)))) {
-                stopCorridor();
-                return;
-            }
-            if (!inCorridor(event.clientX, event.clientY)) {
-                stopCorridor();
-                cancelHover();
-            }
-        };
-        document.addEventListener('mousemove', onMove, true);
-        corridorUntrackRef.current = function () { return document.removeEventListener('mousemove', onMove, true); };
-    }, [cancelHover, inCorridor, stopCorridor]);
-    // a corridor followed when the panel goes is followed no more
-    (0, react_2.useEffect)(function () { return stopCorridor; }, [stopCorridor]);
     var handleMouseLeave = (0, react_2.useCallback)(function (e) {
         var _a;
         if (floatingActions) {
@@ -731,15 +607,10 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
                 floatingActionsRef.current.contains(relatedTarget)) {
                 return;
             }
-            if (_isHovered && inCorridor(e.clientX, e.clientY)) {
-                followCorridor();
-            }
-            else {
-                cancelHover();
-            }
+            cancelHover();
         }
         (_a = rest.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-    }, [floatingActions, rest.onMouseLeave, cancelHover, _isHovered, inCorridor, followCorridor]);
+    }, [floatingActions, rest.onMouseLeave, cancelHover]);
     var handleFloatingActionsMouseLeave = (0, react_2.useCallback)(function (e) {
         var relatedTarget = e.relatedTarget;
         if (panelRef.current &&
@@ -747,13 +618,8 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
             panelRef.current.contains(relatedTarget)) {
             return;
         }
-        // back towards the panel through the strip between them
-        if (inCorridor(e.clientX, e.clientY)) {
-            followCorridor();
-            return;
-        }
         cancelHover();
-    }, [cancelHover, inCorridor, followCorridor]);
+    }, [cancelHover]);
     /* The panel renders as re-resizable's `Resizable` when it is resizable — unless the caller
        gave its own element in `as`, which always wins. (`rest.as || cond ? Resizable : 'div'`
        binds as `(rest.as || cond) ? …`, so a panel given `as` used to render a `Resizable`.) */