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

package/dist/components/NavRail/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,26 +14,64 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { rgba } from 'polished';
-import { memo, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import styled, { css } from 'styled-components';
-import { GAP_FROM_SIZE, HALF_PADDING_FROM_SIZE, resolveRadius, SIZE_TO_PX, } from '../../constants/sizes.js';
-import { changeLightness, getColorFromMaybeString, getMainBackgroundColor } from '../../helpers/colors.js';
-import { omitStyleProps } from '../../helpers/styled.js';
-import { getOneLessSize } from '../../helpers/utils.js';
-import { useReqoreProperty } from '../../hooks/useReqoreContext.js';
-import { useScrollFade } from '../../hooks/useScrollFade.js';
-import { useReqoreTheme } from '../../hooks/useTheme.js';
-import { RAISED_SHADOWS } from '../../styles.js';
-import ReqoreButton from '../Button/index.js';
-import ReqoreControlGroup from '../ControlGroup/index.js';
-import { getGlowBoxShadow, StyledEffect } from '../Effect/index.js';
-import ReqoreMenu from '../Menu/index.js';
-import ReqoreMenuItem from '../Menu/item.js';
-import { ReqorePopover } from '../Popover/index.js';
-import { ReqoreVerticalSpacer } from '../Spacer/index.js';
-import ReqoreThemeProvider from '../../containers/ThemeProvider.js';
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReqoreNavRail = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var polished_1 = require("polished");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var sizes_1 = require("../../constants/sizes");
+var colors_1 = require("../../helpers/colors");
+var styled_1 = require("../../helpers/styled");
+var utils_1 = require("../../helpers/utils");
+var useReqoreContext_1 = require("../../hooks/useReqoreContext");
+var useScrollFade_1 = require("../../hooks/useScrollFade");
+var useTheme_1 = require("../../hooks/useTheme");
+var styles_1 = require("../../styles");
+var Button_1 = __importDefault(require("../Button"));
+var ControlGroup_1 = __importDefault(require("../ControlGroup"));
+var Effect_1 = require("../Effect");
+var Menu_1 = __importDefault(require("../Menu"));
+var item_1 = __importDefault(require("../Menu/item"));
+var Popover_1 = require("../Popover");
+var Spacer_1 = require("../Spacer");
+var ThemeProvider_1 = __importDefault(require("../../containers/ThemeProvider"));
 // ── Styled surface ────────────────────────────────────────────────────────────
 /**
  * `box-shadow` rules for a surface that paints shadow layers of its own (the
@@ -42,23 +81,23 @@ import ReqoreThemeProvider from '../../containers/ThemeProvider.js';
  * trigger state when it has one.
  */
 var withGlow = function (theme, effect, own) {
-    var base = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: ", ";\n  "], ["\n    box-shadow: ", ";\n  "])), own);
+    var base = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: ", ";\n  "], ["\n    box-shadow: ", ";\n  "])), own);
     if (!(effect === null || effect === void 0 ? void 0 : effect.glow)) {
         return base;
     }
-    var both = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    box-shadow: ", ", ", ";\n  "], ["\n    box-shadow: ", ", ", ";\n  "])), getGlowBoxShadow(theme, effect.glow), own);
+    var both = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    box-shadow: ", ", ", ";\n  "], ["\n    box-shadow: ", ", ", ";\n  "])), (0, Effect_1.getGlowBoxShadow)(theme, effect.glow), own);
     switch (effect.glow.when) {
         case 'hover':
-            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", "\n        &:hover {\n          ", "\n        }\n      "], ["\n        ", "\n        &:hover {\n          ", "\n        }\n      "])), base, both);
+            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", "\n        &:hover {\n          ", "\n        }\n      "], ["\n        ", "\n        &:hover {\n          ", "\n        }\n      "])), base, both);
         case 'focus':
-            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", "\n        &:focus {\n          ", "\n        }\n      "], ["\n        ", "\n        &:focus {\n          ", "\n        }\n      "])), base, both);
+            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", "\n        &:focus {\n          ", "\n        }\n      "], ["\n        ", "\n        &:focus {\n          ", "\n        }\n      "])), base, both);
         case 'active':
-            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", "\n        &:active {\n          ", "\n        }\n      "], ["\n        ", "\n        &:active {\n          ", "\n        }\n      "])), base, both);
+            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", "\n        &:active {\n          ", "\n        }\n      "], ["\n        ", "\n        &:active {\n          ", "\n        }\n      "])), base, both);
         default:
             return both;
     }
 };
-var NavRailSurface = styled(StyledEffect)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  width: fit-content;\n  gap: ", "px;\n  padding: ", "px;\n  border-radius: ", ";\n  /* Labels widen the rail (a hover dwell, a menu closing): let a browser that can\n     interpolate `fit-content` slide it open rather than snap. Elsewhere this is\n     ignored and the rail simply resizes. */\n  interpolate-size: allow-keywords;\n  transition: width 0.2s ease-out;\n\n  background-color: ", ";\n  border: ", ";\n  ", "\n  ", "\n\n  ", "\n\n  /* Expanded: cap the rail and let the scroll box inside shrink to fit \u2014 a\n     floating rail also stays inside its positioned ancestor. */\n  ", "\n\n  ", "\n"], ["\n  display: inline-flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  width: fit-content;\n  gap: ", "px;\n  padding: ", "px;\n  border-radius: ", ";\n  /* Labels widen the rail (a hover dwell, a menu closing): let a browser that can\n     interpolate \\`fit-content\\` slide it open rather than snap. Elsewhere this is\n     ignored and the rail simply resizes. */\n  interpolate-size: allow-keywords;\n  transition: width 0.2s ease-out;\n\n  background-color: ", ";\n  border: ", ";\n  ", "\n  ", "\n\n  ", "\n\n  /* Expanded: cap the rail and let the scroll box inside shrink to fit \u2014 a\n     floating rail also stays inside its positioned ancestor. */\n  ", "\n\n  ", "\n"])), function (_a) {
+var NavRailSurface = (0, styled_components_1.default)(Effect_1.StyledEffect)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  width: fit-content;\n  gap: ", "px;\n  padding: ", "px;\n  border-radius: ", ";\n  /* Labels widen the rail (a hover dwell, a menu closing): let a browser that can\n     interpolate `fit-content` slide it open rather than snap. Elsewhere this is\n     ignored and the rail simply resizes. */\n  interpolate-size: allow-keywords;\n  transition: width 0.2s ease-out;\n\n  background-color: ", ";\n  border: ", ";\n  ", "\n  ", "\n\n  ", "\n\n  /* Expanded: cap the rail and let the scroll box inside shrink to fit \u2014 a\n     floating rail also stays inside its positioned ancestor. */\n  ", "\n\n  ", "\n"], ["\n  display: inline-flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  width: fit-content;\n  gap: ", "px;\n  padding: ", "px;\n  border-radius: ", ";\n  /* Labels widen the rail (a hover dwell, a menu closing): let a browser that can\n     interpolate \\`fit-content\\` slide it open rather than snap. Elsewhere this is\n     ignored and the rail simply resizes. */\n  interpolate-size: allow-keywords;\n  transition: width 0.2s ease-out;\n\n  background-color: ", ";\n  border: ", ";\n  ", "\n  ", "\n\n  ", "\n\n  /* Expanded: cap the rail and let the scroll box inside shrink to fit \u2014 a\n     floating rail also stays inside its positioned ancestor. */\n  ", "\n\n  ", "\n"])), function (_a) {
     var $gap = _a.$gap;
     return $gap;
 }, function (_a) {
@@ -71,35 +110,35 @@ var NavRailSurface = styled(StyledEffect)(templateObject_10 || (templateObject_1
     var theme = _a.theme, $transparent = _a.$transparent, $opacity = _a.$opacity, $bgLightness = _a.$bgLightness;
     return $transparent
         ? 'transparent'
-        : rgba(changeLightness(getMainBackgroundColor(theme), $bgLightness), $opacity);
+        : (0, polished_1.rgba)((0, colors_1.changeLightness)((0, colors_1.getMainBackgroundColor)(theme), $bgLightness), $opacity);
 }, function (_a) {
     var $flat = _a.$flat, theme = _a.theme, $borderLightness = _a.$borderLightness;
     return $flat
         ? 'none'
-        : "1px solid ".concat(rgba(changeLightness(getMainBackgroundColor(theme), $borderLightness), 0.7));
+        : "1px solid ".concat((0, polished_1.rgba)((0, colors_1.changeLightness)((0, colors_1.getMainBackgroundColor)(theme), $borderLightness), 0.7));
 }, function (_a) {
     var $blur = _a.$blur, $opacity = _a.$opacity;
-    return $blur && $opacity < 1 && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      backdrop-filter: blur(", "px);\n    "], ["\n      backdrop-filter: blur(", "px);\n    "])), $blur);
+    return $blur && $opacity < 1 && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      backdrop-filter: blur(", "px);\n    "], ["\n      backdrop-filter: blur(", "px);\n    "])), $blur);
 }, function (_a) {
     var $raised = _a.$raised, $flat = _a.$flat, effect = _a.effect, theme = _a.theme;
-    return $raised && $flat && withGlow(theme, effect, RAISED_SHADOWS);
+    return $raised && $flat && withGlow(theme, effect, styles_1.RAISED_SHADOWS);
 }, function (_a) {
     var $floating = _a.$floating, $position = _a.$position, $offset = _a.$offset;
     return $floating &&
-        $position !== 'static' && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: absolute;\n      top: 50%;\n      ", ": ", "px;\n      transform: translateY(-50%);\n      z-index: 8;\n      max-height: calc(100% - 8px);\n    "], ["\n      position: absolute;\n      top: 50%;\n      ", ": ", "px;\n      transform: translateY(-50%);\n      z-index: 8;\n      max-height: calc(100% - 8px);\n    "])), $position, $offset);
+        $position !== 'static' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: absolute;\n      top: 50%;\n      ", ": ", "px;\n      transform: translateY(-50%);\n      z-index: 8;\n      max-height: calc(100% - 8px);\n    "], ["\n      position: absolute;\n      top: 50%;\n      ", ": ", "px;\n      transform: translateY(-50%);\n      z-index: 8;\n      max-height: calc(100% - 8px);\n    "])), $position, $offset);
 }, function (_a) {
     var $maxHeight = _a.$maxHeight, $floating = _a.$floating, $position = _a.$position;
-    return $maxHeight && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      box-sizing: border-box;\n      max-height: ", ";\n    "], ["\n      box-sizing: border-box;\n      max-height: ", ";\n    "])), $floating && $position !== 'static'
+    return $maxHeight && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      box-sizing: border-box;\n      max-height: ", ";\n    "], ["\n      box-sizing: border-box;\n      max-height: ", ";\n    "])), $floating && $position !== 'static'
         ? "min(".concat($maxHeight, ", calc(100% - 8px))")
         : $maxHeight);
 }, function (_a) {
     var $revealMode = _a.$revealMode, $shown = _a.$shown, $restOpacity = _a.$restOpacity;
-    return $revealMode && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      opacity: ", ";\n      /* Only truly-hidden (revealOnScroll, restOpacity 0) blocks pointer events;\n         a dimmed idle rail must stay hoverable so it can reveal itself. */\n      pointer-events: ", ";\n      transition: opacity 220ms ease, width 0.2s ease-out;\n    "], ["\n      opacity: ", ";\n      /* Only truly-hidden (revealOnScroll, restOpacity 0) blocks pointer events;\n         a dimmed idle rail must stay hoverable so it can reveal itself. */\n      pointer-events: ", ";\n      transition: opacity 220ms ease, width 0.2s ease-out;\n    "])), $shown ? 1 : $restOpacity, $shown || $restOpacity > 0 ? 'auto' : 'none');
+    return $revealMode && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      opacity: ", ";\n      /* Only truly-hidden (revealOnScroll, restOpacity 0) blocks pointer events;\n         a dimmed idle rail must stay hoverable so it can reveal itself. */\n      pointer-events: ", ";\n      transition: opacity 220ms ease, width 0.2s ease-out;\n    "], ["\n      opacity: ", ";\n      /* Only truly-hidden (revealOnScroll, restOpacity 0) blocks pointer events;\n         a dimmed idle rail must stay hoverable so it can reveal itself. */\n      pointer-events: ", ";\n      transition: opacity 220ms ease, width 0.2s ease-out;\n    "])), $shown ? 1 : $restOpacity, $shown || $restOpacity > 0 ? 'auto' : 'none');
 });
 // The active page's "expanded" container. Built on StyledEffect so an
 // `activeEffect` gradient paints it (like the outer rail); the intent tint is
 // the fallback when no gradient is given.
-var ActiveGroupSurface = styled(StyledEffect)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  gap: ", "px;\n  padding: 0 0 ", "px;\n  /* Top cap hugs the (larger) page mark, bottom cap hugs the (smaller) section\n     mark \u2014 so both ends sit flush instead of the bottom bulging. */\n  border-radius: ", ";\n  ", "\n  /* The ring is a shadow layer too \u2014 composed with the active effect's glow. */\n  ", "\n  /* A labelled group spans the rail so its (fluid) marks can fill the width;\n     the section divider inside stays centred by the group's own alignment. */\n  ", "\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  gap: ", "px;\n  padding: 0 0 ", "px;\n  /* Top cap hugs the (larger) page mark, bottom cap hugs the (smaller) section\n     mark \u2014 so both ends sit flush instead of the bottom bulging. */\n  border-radius: ", ";\n  ", "\n  /* The ring is a shadow layer too \u2014 composed with the active effect's glow. */\n  ", "\n  /* A labelled group spans the rail so its (fluid) marks can fill the width;\n     the section divider inside stays centred by the group's own alignment. */\n  ", "\n"])), function (_a) {
+var ActiveGroupSurface = (0, styled_components_1.default)(Effect_1.StyledEffect)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  gap: ", "px;\n  padding: 0 0 ", "px;\n  /* Top cap hugs the (larger) page mark, bottom cap hugs the (smaller) section\n     mark \u2014 so both ends sit flush instead of the bottom bulging. */\n  border-radius: ", ";\n  ", "\n  /* The ring is a shadow layer too \u2014 composed with the active effect's glow. */\n  ", "\n  /* A labelled group spans the rail so its (fluid) marks can fill the width;\n     the section divider inside stays centred by the group's own alignment. */\n  ", "\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  gap: ", "px;\n  padding: 0 0 ", "px;\n  /* Top cap hugs the (larger) page mark, bottom cap hugs the (smaller) section\n     mark \u2014 so both ends sit flush instead of the bottom bulging. */\n  border-radius: ", ";\n  ", "\n  /* The ring is a shadow layer too \u2014 composed with the active effect's glow. */\n  ", "\n  /* A labelled group spans the rail so its (fluid) marks can fill the width;\n     the section divider inside stays centred by the group's own alignment. */\n  ", "\n"])), function (_a) {
     var $gap = _a.$gap;
     return $gap;
 }, function (_a) {
@@ -110,13 +149,13 @@ var ActiveGroupSurface = styled(StyledEffect)(templateObject_13 || (templateObje
     return "".concat($radiusTop, "px ").concat($radiusTop, "px ").concat($radiusBottom, "px ").concat($radiusBottom, "px");
 }, function (_a) {
     var $tint = _a.$tint;
-    return $tint && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), $tint);
+    return $tint && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), $tint);
 }, function (_a) {
     var $ring = _a.$ring, effect = _a.effect, theme = _a.theme;
     return withGlow(theme, effect, "inset 0 0 0 1px ".concat($ring));
 }, function (_a) {
     var $labelled = _a.$labelled;
-    return $labelled && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      align-self: stretch;\n    "], ["\n      align-self: stretch;\n    "])));
+    return $labelled && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      align-self: stretch;\n    "], ["\n      align-self: stretch;\n    "])));
 });
 /* The scroll region of the rail. Inert unless the rail is expanded: no overflow
    (so a mark's glow can still bleed past its edge), no visible fades, no
@@ -130,16 +169,16 @@ var ActiveGroupSurface = styled(StyledEffect)(templateObject_13 || (templateObje
    surface edge to edge, and they take the surface's inner radius so the corners
    never poke out of the pill. `pointer-events: none` keeps them from swallowing
    a click on the mark beneath. */
-var NavRailScroll = styled.div.withConfig({
+var NavRailScroll = styled_components_1.default.div.withConfig({
     // A control group hands every non-intrinsic child its own props; none of them
     // belong on this div.
-    shouldForwardProp: omitStyleProps('size', 'intent', 'fluid', 'fixed', 'fill', 'flat', 'minimal', 'stack', 'spaceBetween', 'customTheme'),
+    shouldForwardProp: (0, styled_1.omitStyleProps)('size', 'intent', 'fluid', 'fixed', 'fill', 'flat', 'minimal', 'stack', 'spaceBetween', 'customTheme'),
 })(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-flow: column nowrap;\n  min-height: 0;\n\n  ", "\n\n  /* A labelled rail's marks span the column, so the region must too. */\n  ", "\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    height: ", "px;\n    pointer-events: none;\n    z-index: 2;\n    opacity: 0;\n    transition: opacity 0.15s ease-out;\n  }\n\n  &::before {\n    top: 0;\n    border-radius: ", ";\n    background: linear-gradient(\n      to bottom,\n      ", ",\n      ", "\n    );\n  }\n\n  &::after {\n    bottom: 0;\n    border-radius: ", ";\n    background: linear-gradient(\n      to top,\n      ", ",\n      ", "\n    );\n  }\n\n  &.reqore-nav-rail-fade-top::before {\n    opacity: 1;\n  }\n\n  &.reqore-nav-rail-fade-bottom::after {\n    opacity: 1;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-flow: column nowrap;\n  min-height: 0;\n\n  ", "\n\n  /* A labelled rail's marks span the column, so the region must too. */\n  ", "\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    height: ", "px;\n    pointer-events: none;\n    z-index: 2;\n    opacity: 0;\n    transition: opacity 0.15s ease-out;\n  }\n\n  &::before {\n    top: 0;\n    border-radius: ", ";\n    background: linear-gradient(\n      to bottom,\n      ", ",\n      ", "\n    );\n  }\n\n  &::after {\n    bottom: 0;\n    border-radius: ", ";\n    background: linear-gradient(\n      to top,\n      ", ",\n      ", "\n    );\n  }\n\n  &.reqore-nav-rail-fade-top::before {\n    opacity: 1;\n  }\n\n  &.reqore-nav-rail-fade-bottom::after {\n    opacity: 1;\n  }\n"])), function (_a) {
     var $scrollable = _a.$scrollable;
-    return $scrollable && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      flex: 1 1 auto;\n    "], ["\n      flex: 1 1 auto;\n    "])));
+    return $scrollable && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      flex: 1 1 auto;\n    "], ["\n      flex: 1 1 auto;\n    "])));
 }, function (_a) {
     var $labelled = _a.$labelled;
-    return $labelled && css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      align-self: stretch;\n    "], ["\n      align-self: stretch;\n    "])));
+    return $labelled && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      align-self: stretch;\n    "], ["\n      align-self: stretch;\n    "])));
 }, function (_a) {
     var $bleed = _a.$bleed;
     return -$bleed;
@@ -174,9 +213,9 @@ var NavRailScroll = styled.div.withConfig({
    margin / padding pair widens the clip box into the rail's padding without
    moving the marks, so a glow or raised shadow is clipped at the surface, not
    at the mark. */
-var NavRailScrollBox = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  min-height: 0;\n\n  ", "\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  min-height: 0;\n\n  ", "\n"])), function (_a) {
+var NavRailScrollBox = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  min-height: 0;\n\n  ", "\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  min-height: 0;\n\n  ", "\n"])), function (_a) {
     var $scrollable = _a.$scrollable, $bleed = _a.$bleed;
-    return $scrollable && css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      overflow-y: auto;\n      overflow-x: hidden;\n      margin: 0 ", "px;\n      padding: 0 ", "px;\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n      }\n    "], ["\n      overflow-y: auto;\n      overflow-x: hidden;\n      margin: 0 ", "px;\n      padding: 0 ", "px;\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n      }\n    "])), -$bleed, $bleed);
+    return $scrollable && (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      overflow-y: auto;\n      overflow-x: hidden;\n      margin: 0 ", "px;\n      padding: 0 ", "px;\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n      }\n    "], ["\n      overflow-y: auto;\n      overflow-x: hidden;\n      margin: 0 ", "px;\n      padding: 0 ", "px;\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n      }\n    "])), -$bleed, $bleed);
 });
 // Hoisted so the memo'd control group / spacer children see stable objects.
 var EXPANDED_GROUP_STYLE = { minHeight: 0, flex: '1 1 auto' };
@@ -196,8 +235,8 @@ function splitAroundActive(list, activeId, max) {
 }
 /** Measure the positioned ancestor's height (for overflow budgeting). */
 function useAncestorHeight(enabled, maxHeight, ref) {
-    var _a = useState(maxHeight), height = _a[0], setHeight = _a[1];
-    useEffect(function () {
+    var _a = (0, react_1.useState)(maxHeight), height = _a[0], setHeight = _a[1];
+    (0, react_1.useEffect)(function () {
         if (typeof maxHeight === 'number') {
             setHeight(maxHeight);
             return undefined;
@@ -219,14 +258,14 @@ var resolvePadding = function (padded, size) {
     if (padded === false)
         return 0;
     if (padded === undefined || padded === true)
-        return HALF_PADDING_FROM_SIZE[size];
-    return HALF_PADDING_FROM_SIZE[padded];
+        return sizes_1.HALF_PADDING_FROM_SIZE[size];
+    return sizes_1.HALF_PADDING_FROM_SIZE[padded];
 };
-var NavRailOverflow = memo(function (_a) {
+var NavRailOverflow = (0, react_1.memo)(function (_a) {
     var items = _a.items, size = _a.size, placement = _a.placement, ariaLabel = _a.ariaLabel, _b = _a.tooltipSuffix, tooltipSuffix = _b === void 0 ? 'more' : _b, labelled = _a.labelled, onSelect = _a.onSelect, onOpenChange = _a.onOpenChange;
     // Memoised so the memo'd ReqorePopover/ReqoreMenuItem children get stable
     // props (no new object/closure per render).
-    var componentProps = useMemo(function () { return ({
+    var componentProps = (0, react_1.useMemo)(function () { return ({
         icon: 'More2Line',
         size: size,
         flat: true,
@@ -240,15 +279,15 @@ var NavRailOverflow = memo(function (_a) {
         tooltip: labelled ? undefined : { content: "".concat(items.length, " ").concat(tooltipSuffix), placement: placement },
         label: labelled ? "".concat(items.length, " ").concat(tooltipSuffix) : undefined,
     }); }, [size, ariaLabel, placement, items.length, tooltipSuffix, labelled]);
-    var handleItemClick = useCallback(function (_event, itemId) {
+    var handleItemClick = (0, react_1.useCallback)(function (_event, itemId) {
         if (itemId)
             onSelect(itemId);
     }, [onSelect]);
     // Height-capped so a long overflow list (many hidden pages) never runs off
     // the viewport — sensible on mobile too (70vh, never past 480px); it scrolls
     // past that (ReqoreMenu is overflow-y:auto).
-    var content = useMemo(function () { return (_jsx(ReqoreMenu, { rounded: true, padded: true, width: '210px', maxHeight: 'min(70vh, 480px)', children: items.map(function (it) { return (_jsx(ReqoreMenuItem, { itemId: it.id, icon: it.icon, selected: it.active, intent: it.active ? 'info' : undefined, onClick: handleItemClick, children: it.label }, it.id)); }) })); }, [items, handleItemClick]);
-    return (_jsx(ReqorePopover, { component: ReqoreButton, componentProps: componentProps, 
+    var content = (0, react_1.useMemo)(function () { return ((0, jsx_runtime_1.jsx)(Menu_1.default, { rounded: true, padded: true, width: '210px', maxHeight: 'min(70vh, 480px)', children: items.map(function (it) { return ((0, jsx_runtime_1.jsx)(item_1.default, { itemId: it.id, icon: it.icon, selected: it.active, intent: it.active ? 'info' : undefined, onClick: handleItemClick, children: it.label }, it.id)); }) })); }, [items, handleItemClick]);
+    return ((0, jsx_runtime_1.jsx)(Popover_1.ReqorePopover, { component: Button_1.default, componentProps: componentProps, 
         // The trigger IS the mark: rendered directly, not boxed in the popover's
         // wrapper span — that span would be the flex child in the mark's place
         // (so a labelled, fluid trigger could never stretch to the rail's width)
@@ -258,27 +297,27 @@ var NavRailOverflow = memo(function (_a) {
 // The one overflow affordance of an `expandable` rail. Shaped like a mark
 // (circle, or a fluid pill on a labelled rail) so it reads as part of the
 // column, with a chevron pointing the way the rail will grow.
-var NavRailExpandToggle = memo(function (_a) {
+var NavRailExpandToggle = (0, react_1.memo)(function (_a) {
     var expanded = _a.expanded, hiddenCount = _a.hiddenCount, size = _a.size, tipSide = _a.tipSide, labelled = _a.labelled, expandLabel = _a.expandLabel, collapseLabel = _a.collapseLabel, tooltipSuffix = _a.tooltipSuffix, onToggle = _a.onToggle;
     var text = expanded ? collapseLabel : "".concat(hiddenCount, " ").concat(tooltipSuffix);
-    var tooltip = useMemo(function () { return ({ content: text, placement: tipSide }); }, [text, tipSide]);
-    return (_jsx(ReqoreButton, { icon: expanded ? 'ArrowUpSLine' : 'ArrowDownSLine', size: size, flat: true, minimal: true, raised: true, circle: !labelled, pill: !!labelled, fluid: !!labelled, "aria-label": expanded ? collapseLabel : expandLabel, "aria-expanded": expanded, className: 'reqore-nav-rail-expand', tooltip: labelled ? undefined : tooltip, label: labelled ? text : undefined, onClick: onToggle }));
+    var tooltip = (0, react_1.useMemo)(function () { return ({ content: text, placement: tipSide }); }, [text, tipSide]);
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, { icon: expanded ? 'ArrowUpSLine' : 'ArrowDownSLine', size: size, flat: true, minimal: true, raised: true, circle: !labelled, pill: !!labelled, fluid: !!labelled, "aria-label": expanded ? collapseLabel : expandLabel, "aria-expanded": expanded, className: 'reqore-nav-rail-expand', tooltip: labelled ? undefined : tooltip, label: labelled ? text : undefined, onClick: onToggle }));
 });
 // One circular mark. Kept as its own memo'd component so its `tooltip` object
 // and `onClick` closure are stabilised (useMemo/useCallback) rather than created
 // inline in a `.map()` and passed to the memo'd ReqoreButton every render.
-var NavRailMark = memo(function (_a) {
+var NavRailMark = (0, react_1.memo)(function (_a) {
     var id = _a.id, label = _a.label, icon = _a.icon, iconImage = _a.iconImage, size = _a.size, intent = _a.intent, effect = _a.effect, disabled = _a.disabled, active = _a.active, labelled = _a.labelled, tipSide = _a.tipSide, className = _a.className, ariaCurrent = _a.ariaCurrent, onSelect = _a.onSelect, buttonProps = _a.buttonProps;
-    var tooltip = useMemo(function () { return ({ content: label, placement: tipSide }); }, [label, tipSide]);
-    var handleClick = useCallback(function () { return onSelect(id); }, [onSelect, id]);
+    var tooltip = (0, react_1.useMemo)(function () { return ({ content: label, placement: tipSide }); }, [label, tipSide]);
+    var handleClick = (0, react_1.useCallback)(function () { return onSelect(id); }, [onSelect, id]);
     // An image mark renders through the button's left-icon slot; merge with any
     // caller-supplied leftIconProps so `iconImage` and `props.leftIconProps`
     // coexist (the image wins the `image` key).
-    var leftIconProps = useMemo(function () {
+    var leftIconProps = (0, react_1.useMemo)(function () {
         return iconImage
             ? __assign(__assign({}, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIconProps), { image: iconImage }) : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIconProps;
     }, [iconImage, buttonProps]);
-    return (_jsx(ReqoreButton
+    return ((0, jsx_runtime_1.jsx)(Button_1.default
     // Escape hatch first, so the rail's own structural / behavioural props
     // below always win (the mark can be tuned but never broken).
     , __assign({}, buttonProps, { circle: !labelled, pill: labelled || (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.pill), fluid: labelled || (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.fluid), size: size, icon: icon, leftIconProps: leftIconProps, flat: true, 
@@ -298,28 +337,28 @@ var NavRailMark = memo(function (_a) {
  * and `showLabels` widens it into a labelled rail — always, or after the pointer
  * has rested on it for a moment.
  */
-export var ReqoreNavRail = memo(function (_a) {
+exports.ReqoreNavRail = (0, react_1.memo)(function (_a) {
     var _b, _c, _d;
     var items = _a.items, activeId = _a.activeId, activeSubId = _a.activeSubId, defaultActiveId = _a.defaultActiveId, defaultActiveSubId = _a.defaultActiveSubId, onItemClick = _a.onItemClick, onSubClick = _a.onSubClick, _e = _a.position, position = _e === void 0 ? 'left' : _e, floating = _a.floating, idleReveal = _a.idleReveal, _f = _a.idleOpacity, idleOpacity = _f === void 0 ? 0.34 : _f, revealOnScroll = _a.revealOnScroll, _g = _a.scrollHideDelay, scrollHideDelay = _g === void 0 ? 1100 : _g, _h = _a.offset, offset = _h === void 0 ? 14 : _h, scrollContainer = _a.scrollContainer, scrollSpy = _a.scrollSpy, maxHeight = _a.maxHeight, maxItems = _a.maxItems, expandable = _a.expandable, expanded = _a.expanded, _j = _a.defaultExpanded, defaultExpanded = _j === void 0 ? false : _j, onExpandedChange = _a.onExpandedChange, _k = _a.expandedMaxHeight, expandedMaxHeight = _k === void 0 ? '95vh' : _k, fadeColor = _a.fadeColor, showLabels = _a.showLabels, _l = _a.showLabelsDelay, showLabelsDelay = _l === void 0 ? 1500 : _l, _m = _a.size, size = _m === void 0 ? 'small' : _m, intent = _a.intent, effect = _a.effect, activeEffect = _a.activeEffect, _o = _a.flat, flat = _o === void 0 ? false : _o, minimal = _a.minimal, transparent = _a.transparent, _p = _a.rounded, rounded = _p === void 0 ? true : _p, radiusSize = _a.radiusSize, _q = _a.padded, padded = _q === void 0 ? true : _q, raised = _a.raised, _r = _a.opacity, opacity = _r === void 0 ? 1 : _r, _s = _a.blur, blur = _s === void 0 ? 4 : _s, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, header = _a.header, footer = _a.footer, className = _a.className, style = _a.style, _t = _a.moreItemsLabel, moreItemsLabel = _t === void 0 ? 'More items' : _t, _u = _a.moreSectionsLabel, moreSectionsLabel = _u === void 0 ? 'More sections' : _u, _v = _a.overflowTooltipSuffix, overflowTooltipSuffix = _v === void 0 ? 'more' : _v, _w = _a.activeGroupAriaLabelSuffix, activeGroupAriaLabelSuffix = _w === void 0 ? 'sections' : _w, _x = _a.expandLabel, expandLabel = _x === void 0 ? 'Show all items' : _x, _y = _a.collapseLabel, collapseLabel = _y === void 0 ? 'Show fewer items' : _y;
     // NB: `intent` is deliberately NOT fed to the theme here — it must not
     // recolour the whole rail surface; it only drives the active accent + the
     // active group's tint (see `activeIntent` / `renderActiveGroup`).
-    var theme = useReqoreTheme('main', customTheme, undefined, undefined, inheritCustomTheme);
-    var isHoverCapable = useReqoreProperty('isHoverCapable');
-    var subSize = getOneLessSize(size);
+    var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, undefined, undefined, inheritCustomTheme);
+    var isHoverCapable = (0, useReqoreContext_1.useReqoreProperty)('isHoverCapable');
+    var subSize = (0, utils_1.getOneLessSize)(size);
     var tipSide = position === 'right' ? 'left' : 'right';
     var activeIntent = intent !== null && intent !== void 0 ? intent : 'info';
     var isTransparent = !!(transparent || minimal);
     var isFlat = !!(flat || minimal);
-    var _z = useState(defaultActiveId !== null && defaultActiveId !== void 0 ? defaultActiveId : (_b = items[0]) === null || _b === void 0 ? void 0 : _b.id), internalId = _z[0], setInternalId = _z[1];
+    var _z = (0, react_1.useState)(defaultActiveId !== null && defaultActiveId !== void 0 ? defaultActiveId : (_b = items[0]) === null || _b === void 0 ? void 0 : _b.id), internalId = _z[0], setInternalId = _z[1];
     var activeItemId = activeId !== null && activeId !== void 0 ? activeId : internalId;
-    var activeItem = useMemo(function () { return items.find(function (i) { return i.id === activeItemId; }); }, [items, activeItemId]);
-    var subItems = useMemo(function () { var _a; return (_a = activeItem === null || activeItem === void 0 ? void 0 : activeItem.items) !== null && _a !== void 0 ? _a : []; }, [activeItem]);
-    var _0 = useState(defaultActiveSubId), internalSubId = _0[0], setInternalSubId = _0[1];
+    var activeItem = (0, react_1.useMemo)(function () { return items.find(function (i) { return i.id === activeItemId; }); }, [items, activeItemId]);
+    var subItems = (0, react_1.useMemo)(function () { var _a; return (_a = activeItem === null || activeItem === void 0 ? void 0 : activeItem.items) !== null && _a !== void 0 ? _a : []; }, [activeItem]);
+    var _0 = (0, react_1.useState)(defaultActiveSubId), internalSubId = _0[0], setInternalSubId = _0[1];
     var activeSubItemId = (_c = activeSubId !== null && activeSubId !== void 0 ? activeSubId : internalSubId) !== null && _c !== void 0 ? _c : (_d = subItems[0]) === null || _d === void 0 ? void 0 : _d.id;
-    var _1 = useState(defaultExpanded), internalExpanded = _1[0], setInternalExpanded = _1[1];
+    var _1 = (0, react_1.useState)(defaultExpanded), internalExpanded = _1[0], setInternalExpanded = _1[1];
     var isExpanded = !!expandable && (expanded !== null && expanded !== void 0 ? expanded : internalExpanded);
-    var toggleExpanded = useCallback(function () {
+    var toggleExpanded = (0, react_1.useCallback)(function () {
         var next = !(expanded !== null && expanded !== void 0 ? expanded : internalExpanded);
         if (expanded === undefined)
             setInternalExpanded(next);
@@ -330,21 +369,21 @@ export var ReqoreNavRail = memo(function (_a) {
     // overflow names) rather than half-working. `isHoverCapable` defaults to
     // capable where the query cannot be evaluated.
     var hoverLabels = showLabels === 'hover' && isHoverCapable !== false;
-    var _2 = useState(false), dwellLabels = _2[0], setDwellLabels = _2[1];
+    var _2 = (0, react_1.useState)(false), dwellLabels = _2[0], setDwellLabels = _2[1];
     var labelled = showLabels === true || (hoverLabels && dwellLabels);
     // What the header / footer are told, so a control can follow the marks.
-    var slotState = useMemo(function () { return ({ labelled: labelled, expanded: isExpanded, size: size }); }, [labelled, isExpanded, size]);
+    var slotState = (0, react_1.useMemo)(function () { return ({ labelled: labelled, expanded: isExpanded, size: size }); }, [labelled, isExpanded, size]);
     var renderSlot = function (slot) {
         return typeof slot === 'function' ? slot(slotState) : slot;
     };
-    var _3 = useState(false), hovered = _3[0], setHovered = _3[1];
-    var _4 = useState(false), scrolling = _4[0], setScrolling = _4[1];
-    var _5 = useState(0), openMenus = _5[0], setOpenMenus = _5[1];
-    var onMenuToggle = useCallback(function (open) { return setOpenMenus(function (c) { return Math.max(0, c + (open ? 1 : -1)); }); }, []);
+    var _3 = (0, react_1.useState)(false), hovered = _3[0], setHovered = _3[1];
+    var _4 = (0, react_1.useState)(false), scrolling = _4[0], setScrolling = _4[1];
+    var _5 = (0, react_1.useState)(0), openMenus = _5[0], setOpenMenus = _5[1];
+    var onMenuToggle = (0, react_1.useCallback)(function (open) { return setOpenMenus(function (c) { return Math.max(0, c + (open ? 1 : -1)); }); }, []);
     // Read by the native pointer handlers below, which are bound once.
-    var hoveredRef = useRef(false);
-    var openMenusRef = useRef(0);
-    var railRef = useRef(null);
+    var hoveredRef = (0, react_1.useRef)(false);
+    var openMenusRef = (0, react_1.useRef)(0);
+    var railRef = (0, react_1.useRef)(null);
     var budgetOn = !!floating || typeof maxHeight === 'number';
     var availHeight = useAncestorHeight(budgetOn, maxHeight, railRef);
     // Idle-reveal hover and the label dwell use NATIVE mouseenter/leave on the
@@ -352,7 +391,7 @@ export var ReqoreNavRail = memo(function (_a) {
     // tree, so a portalled child (a mark's tooltip) counts as "inside" and the
     // leave never fires when a tooltip is up. Native DOM events use real subtree
     // containment instead.
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (!idleReveal && !hoverLabels)
             return undefined;
         var el = railRef.current;
@@ -389,13 +428,13 @@ export var ReqoreNavRail = memo(function (_a) {
     }, [idleReveal, hoverLabels, showLabelsDelay]);
     // The last menu closing with the pointer already gone is the deferred
     // "leave" from above.
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         openMenusRef.current = openMenus;
         if (openMenus === 0 && !hoveredRef.current)
             setDwellLabels(false);
     }, [openMenus]);
     // Budget marks to the height; sections get ~40% (min 2), pages the rest.
-    var markH = SIZE_TO_PX[size] + GAP_FROM_SIZE[size];
+    var markH = sizes_1.SIZE_TO_PX[size] + sizes_1.GAP_FROM_SIZE[size];
     var reserve = markH * 2 + 44; // header/footer/sub-capsule chrome
     var slots = availHeight === undefined
         ? Number.POSITIVE_INFINITY
@@ -431,7 +470,7 @@ export var ReqoreNavRail = memo(function (_a) {
     var activeAt = itemsShown.findIndex(function (i) { return i.id === activeItemId; });
     var before = activeAt >= 0 ? itemsShown.slice(0, activeAt) : itemsShown; // before active
     var after = activeAt >= 0 ? itemsShown.slice(activeAt + 1) : []; // after active
-    var selectItem = useCallback(function (item) {
+    var selectItem = (0, react_1.useCallback)(function (item) {
         var _a;
         if (item.disabled)
             return;
@@ -442,7 +481,7 @@ export var ReqoreNavRail = memo(function (_a) {
         (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
         onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item.id, item);
     }, [activeId, onItemClick]);
-    var selectSub = useCallback(function (sub) {
+    var selectSub = (0, react_1.useCallback)(function (sub) {
         var _a, _b;
         if (sub.disabled)
             return;
@@ -457,12 +496,12 @@ export var ReqoreNavRail = memo(function (_a) {
     }, [activeSubId, onSubClick]);
     // Stable id-based select callbacks so the memo'd mark / overflow children
     // don't receive a fresh closure each render.
-    var onItemSelect = useCallback(function (id) {
+    var onItemSelect = (0, react_1.useCallback)(function (id) {
         var item = items.find(function (i) { return i.id === id; });
         if (item)
             selectItem(item);
     }, [items, selectItem]);
-    var onSubSelect = useCallback(function (id) {
+    var onSubSelect = (0, react_1.useCallback)(function (id) {
         var sub = subItems.find(function (s) { return s.id === id; });
         if (sub)
             selectSub(sub);
@@ -472,7 +511,7 @@ export var ReqoreNavRail = memo(function (_a) {
     // controlled). A plain scroll listener + getBoundingClientRect is used
     // rather than IntersectionObserver, whose callback only reports the entries
     // that *changed* — unreliable for "which section is current right now".
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var _a;
         if (!scrollSpy || activeSubId !== undefined)
             return undefined;
@@ -503,7 +542,7 @@ export var ReqoreNavRail = memo(function (_a) {
         return function () { return scrollTarget.removeEventListener('scroll', compute); };
     }, [scrollSpy, activeSubId, subItems, scrollContainer]);
     // Reveal-on-scroll (mobile): show while scrolling, hide after a quiet delay.
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var _a;
         if (!revealOnScroll)
             return undefined;
@@ -522,9 +561,9 @@ export var ReqoreNavRail = memo(function (_a) {
     }, [revealOnScroll, scrollContainer, scrollHideDelay]);
     // The vignette follows the scroll box's edges; off (classes cleared) while
     // the rail is collapsed and nothing scrolls.
-    var scrollWrapRef = useRef(null);
-    var scrollBoxRef = useRef(null);
-    useScrollFade({
+    var scrollWrapRef = (0, react_1.useRef)(null);
+    var scrollBoxRef = (0, react_1.useRef)(null);
+    (0, useScrollFade_1.useScrollFade)({
         scrollRef: scrollBoxRef,
         targetRef: scrollWrapRef,
         axis: 'y',
@@ -540,21 +579,21 @@ export var ReqoreNavRail = memo(function (_a) {
             : true;
     var restOpacity = revealOnScroll ? 0 : idleOpacity;
     var pill = rounded && !radiusSize;
-    var radius = resolveRadius(size, radiusSize);
+    var radius = (0, sizes_1.resolveRadius)(size, radiusSize);
     var pad = resolvePadding(padded, size);
     // A labelled rail is wide: a 9999px radius would round its caps into
     // semicircles. Keep the curvature of the icon-only pill instead, so the
     // rail reads as the same object, just wider.
-    var pillRadius = Math.round(SIZE_TO_PX[size] / 2 + pad + 1);
+    var pillRadius = Math.round(sizes_1.SIZE_TO_PX[size] / 2 + pad + 1);
     var surfacePill = pill && !labelled;
     var surfaceRadius = pill && labelled ? pillRadius : radius;
     // The fade dissolves the marks into the rail's own surface (or, on a
     // transparent rail, into the page behind it).
     var fadeBase = fadeColor !== null && fadeColor !== void 0 ? fadeColor : (isTransparent
-        ? getMainBackgroundColor(theme)
-        : changeLightness(getMainBackgroundColor(theme), 0.02));
-    var fadeFrom = rgba(fadeBase, isTransparent ? 1 : opacity);
-    var fadeTo = rgba(fadeBase, 0);
+        ? (0, colors_1.getMainBackgroundColor)(theme)
+        : (0, colors_1.changeLightness)((0, colors_1.getMainBackgroundColor)(theme), 0.02));
+    var fadeFrom = (0, polished_1.rgba)(fadeBase, isTransparent ? 1 : opacity);
+    var fadeTo = (0, polished_1.rgba)(fadeBase, 0);
     var expandedCap = isExpanded
         ? typeof expandedMaxHeight === 'number'
             ? "".concat(expandedMaxHeight, "px")
@@ -567,7 +606,7 @@ export var ReqoreNavRail = memo(function (_a) {
     var renderItem = function (item) {
         var _a, _b;
         var active = item.id === activeItemId;
-        return (_jsx(NavRailMark, { id: item.id, label: item.label, icon: item.icon, iconImage: item.iconImage, size: size, disabled: item.disabled, active: active, labelled: labelled, 
+        return ((0, jsx_runtime_1.jsx)(NavRailMark, { id: item.id, label: item.label, icon: item.icon, iconImage: item.iconImage, size: size, disabled: item.disabled, active: active, labelled: labelled, 
             // A per-item effect (a "special" mark) wins and always paints; else the
             // active mark takes the shared activeEffect, inactive marks none.
             effect: (_a = item.effect) !== null && _a !== void 0 ? _a : (active ? activeEffect : undefined), intent: active ? (_b = item.intent) !== null && _b !== void 0 ? _b : activeIntent : item.intent, className: 'reqore-nav-rail-item', ariaCurrent: active ? 'page' : undefined, tipSide: tipSide, onSelect: onItemSelect, buttonProps: item.props }, item.id));
@@ -576,9 +615,9 @@ export var ReqoreNavRail = memo(function (_a) {
     // of items breathing room: extra vertical space (≈2.5× the mark gap), with a
     // short centred line (`withLine`) so the break reads as intentional, or just
     // the space (`'space'`) for a quieter break. Untinted; the rail never widens.
-    var renderDivider = function (key, withLine) { return (_jsx(ReqoreVerticalSpacer, { 
+    var renderDivider = function (key, withLine) { return ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreVerticalSpacer, { 
         // A line-less break needs a touch more space to register on its own.
-        height: Math.round(GAP_FROM_SIZE[size] * (withLine ? 2.5 : 3.5)), width: "".concat(Math.round(SIZE_TO_PX[size] * 0.66), "px"), lineSize: withLine ? 'small' : 'none', style: labelled ? LABELLED_DIVIDER_STYLE : undefined }, "".concat(key, "-divider"))); };
+        height: Math.round(sizes_1.GAP_FROM_SIZE[size] * (withLine ? 2.5 : 3.5)), width: "".concat(Math.round(sizes_1.SIZE_TO_PX[size] * 0.66), "px"), lineSize: withLine ? 'small' : 'none', style: labelled ? LABELLED_DIVIDER_STYLE : undefined }, "".concat(key, "-divider"))); };
     // A primary mark plus its optional trailing divider (React flattens the
     // returned array; every child carries a key). `'space'` draws no line.
     var renderPrimary = function (item) {
@@ -589,7 +628,7 @@ export var ReqoreNavRail = memo(function (_a) {
     var renderSub = function (sub) {
         var _a;
         var active = sub.id === activeSubItemId;
-        return (_jsx(NavRailMark, { id: sub.id, label: sub.label, icon: sub.icon, iconImage: sub.iconImage, size: subSize, disabled: sub.disabled, active: active, labelled: labelled, effect: active ? activeEffect : undefined, intent: active ? (_a = sub.intent) !== null && _a !== void 0 ? _a : activeIntent : sub.intent, className: 'reqore-nav-rail-subitem', ariaCurrent: active ? 'location' : undefined, tipSide: tipSide, onSelect: onSubSelect, buttonProps: sub.props }, sub.id));
+        return ((0, jsx_runtime_1.jsx)(NavRailMark, { id: sub.id, label: sub.label, icon: sub.icon, iconImage: sub.iconImage, size: subSize, disabled: sub.disabled, active: active, labelled: labelled, effect: active ? activeEffect : undefined, intent: active ? (_a = sub.intent) !== null && _a !== void 0 ? _a : activeIntent : sub.intent, className: 'reqore-nav-rail-subitem', ariaCurrent: active ? 'location' : undefined, tipSide: tipSide, onSelect: onSubSelect, buttonProps: sub.props }, sub.id));
     };
     // The active page's mark "expands" into the sub-rail: its own icon, a line
     // separator, then its section marks — all inside one grouped container.
@@ -599,29 +638,29 @@ export var ReqoreNavRail = memo(function (_a) {
             return renderItem(item);
         // Tint the wrapping container with the active mark's own intent colour so
         // the sub-rail reads as one coloured "you are here" unit.
-        var groupColor = getColorFromMaybeString(theme, (_a = item.intent) !== null && _a !== void 0 ? _a : activeIntent);
+        var groupColor = (0, colors_1.getColorFromMaybeString)(theme, (_a = item.intent) !== null && _a !== void 0 ? _a : activeIntent);
         // One mark wide (inset-shadow "border", no horizontal padding) so the rail
         // never changes width; the top mark sits flush in the pill cap and a little
         // bottom padding keeps the last section off the edge.
-        return (_jsxs(ActiveGroupSurface, { as: 'div', effect: activeEffect, role: 'group', "aria-label": "".concat(item.label, " ").concat(activeGroupAriaLabelSuffix), className: 'reqore-nav-rail-active', theme: theme, "$gap": GAP_FROM_SIZE[subSize], "$padBottom": 2, "$radiusTop": pill ? Math.round(SIZE_TO_PX[size] / 2) : radius, "$radiusBottom": pill ? Math.round(SIZE_TO_PX[subSize] / 2) : radius, "$ring": rgba(groupColor, 0.42), "$tint": (activeEffect === null || activeEffect === void 0 ? void 0 : activeEffect.gradient) ? undefined : rgba(groupColor, 0.16), "$labelled": labelled, children: [renderItem(item), _jsx(ReqoreVerticalSpacer, { height: GAP_FROM_SIZE[size], width: "".concat(Math.round(SIZE_TO_PX[subSize] * 0.5), "px"), lineSize: 'tiny', intent: (_b = item.intent) !== null && _b !== void 0 ? _b : activeIntent }), subsShown.map(renderSub), !expandable && subsHidden.length ? (_jsx(NavRailOverflow, { items: subsHidden.map(function (s) { return ({
+        return ((0, jsx_runtime_1.jsxs)(ActiveGroupSurface, { as: 'div', effect: activeEffect, role: 'group', "aria-label": "".concat(item.label, " ").concat(activeGroupAriaLabelSuffix), className: 'reqore-nav-rail-active', theme: theme, "$gap": sizes_1.GAP_FROM_SIZE[subSize], "$padBottom": 2, "$radiusTop": pill ? Math.round(sizes_1.SIZE_TO_PX[size] / 2) : radius, "$radiusBottom": pill ? Math.round(sizes_1.SIZE_TO_PX[subSize] / 2) : radius, "$ring": (0, polished_1.rgba)(groupColor, 0.42), "$tint": (activeEffect === null || activeEffect === void 0 ? void 0 : activeEffect.gradient) ? undefined : (0, polished_1.rgba)(groupColor, 0.16), "$labelled": labelled, children: [renderItem(item), (0, jsx_runtime_1.jsx)(Spacer_1.ReqoreVerticalSpacer, { height: sizes_1.GAP_FROM_SIZE[size], width: "".concat(Math.round(sizes_1.SIZE_TO_PX[subSize] * 0.5), "px"), lineSize: 'tiny', intent: (_b = item.intent) !== null && _b !== void 0 ? _b : activeIntent }), subsShown.map(renderSub), !expandable && subsHidden.length ? ((0, jsx_runtime_1.jsx)(NavRailOverflow, { items: subsHidden.map(function (s) { return ({
                         id: s.id,
                         label: s.label,
                         icon: s.icon,
                         active: s.id === activeSubItemId,
                     }); }), size: subSize, placement: tipSide, ariaLabel: moreSectionsLabel, tooltipSuffix: overflowTooltipSuffix, labelled: labelled, onSelect: onSubSelect, onOpenChange: onMenuToggle })) : null] }, item.id));
     };
-    return (_jsx(ReqoreThemeProvider, { theme: theme, customTheme: customTheme, children: _jsx(NavRailSurface, { as: 'nav', ref: railRef, effect: effect, role: 'navigation', className: [
+    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { theme: theme, customTheme: customTheme, children: (0, jsx_runtime_1.jsx)(NavRailSurface, { as: 'nav', ref: railRef, effect: effect, role: 'navigation', className: [
                 className,
                 'reqore-nav-rail',
                 labelled && 'reqore-nav-rail-labelled',
                 isExpanded && 'reqore-nav-rail-expanded',
             ]
                 .filter(Boolean)
-                .join(' '), style: style, theme: theme, "$gap": GAP_FROM_SIZE[size], "$padding": pad, "$radius": surfaceRadius, "$pill": surfacePill, "$flat": isFlat, "$raised": !!raised, "$transparent": isTransparent, "$opacity": opacity, "$blur": blur, "$bgLightness": 0.02, "$borderLightness": 0.14, "$position": position, "$floating": floating, "$offset": offset, "$revealMode": revealMode, "$shown": shown, "$restOpacity": restOpacity, "$maxHeight": expandedCap, children: _jsxs(ReqoreControlGroup, { vertical: true, gapSize: size, horizontalAlign: columnAlign, 
+                .join(' '), style: style, theme: theme, "$gap": sizes_1.GAP_FROM_SIZE[size], "$padding": pad, "$radius": surfaceRadius, "$pill": surfacePill, "$flat": isFlat, "$raised": !!raised, "$transparent": isTransparent, "$opacity": opacity, "$blur": blur, "$bgLightness": 0.02, "$borderLightness": 0.14, "$position": position, "$floating": floating, "$offset": offset, "$revealMode": revealMode, "$shown": shown, "$restOpacity": restOpacity, "$maxHeight": expandedCap, children: (0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { vertical: true, gapSize: size, horizontalAlign: columnAlign, 
                 // Expanded, the column must be allowed to shrink so the scroll
                 // region inside it (not the header / toggle / footer) takes the cut.
-                style: isExpanded ? EXPANDED_GROUP_STYLE : undefined, children: [renderSlot(header), _jsx(NavRailScroll, { ref: scrollWrapRef, className: 'reqore-nav-rail-scroll', "$fadeFrom": fadeFrom, "$fadeTo": fadeTo, "$fadeSize": SIZE_TO_PX[size], "$fadeRadius": pill ? Math.round(SIZE_TO_PX[size] / 2) + pad : Math.max(0, radius - 1), "$bleed": pad, "$scrollable": isExpanded, "$labelled": labelled, children: _jsx(NavRailScrollBox, { ref: scrollBoxRef, className: 'reqore-nav-rail-scroll-box', "$scrollable": isExpanded, "$bleed": pad, children: _jsxs(ReqoreControlGroup, { vertical: true, gapSize: size, horizontalAlign: columnAlign, children: [before.map(renderPrimary), activeAt >= 0 && activeItem ? renderActiveGroup(activeItem) : null, after.map(renderPrimary), !expandable && itemsHidden.length ? (_jsx(NavRailOverflow, { items: itemsHidden.map(function (i) { return ({ id: i.id, label: i.label, icon: i.icon }); }), size: size, placement: tipSide, ariaLabel: moreItemsLabel, tooltipSuffix: overflowTooltipSuffix, labelled: labelled, onSelect: onItemSelect, onOpenChange: onMenuToggle })) : null] }) }) }), expandable && hiddenWhenCollapsed > 0 ? (_jsx(NavRailExpandToggle, { expanded: isExpanded, hiddenCount: hiddenWhenCollapsed, size: size, tipSide: tipSide, labelled: labelled, expandLabel: expandLabel, collapseLabel: collapseLabel, tooltipSuffix: overflowTooltipSuffix, onToggle: toggleExpanded })) : null, renderSlot(footer)] }) }) }));
+                style: isExpanded ? EXPANDED_GROUP_STYLE : undefined, children: [renderSlot(header), (0, jsx_runtime_1.jsx)(NavRailScroll, { ref: scrollWrapRef, className: 'reqore-nav-rail-scroll', "$fadeFrom": fadeFrom, "$fadeTo": fadeTo, "$fadeSize": sizes_1.SIZE_TO_PX[size], "$fadeRadius": pill ? Math.round(sizes_1.SIZE_TO_PX[size] / 2) + pad : Math.max(0, radius - 1), "$bleed": pad, "$scrollable": isExpanded, "$labelled": labelled, children: (0, jsx_runtime_1.jsx)(NavRailScrollBox, { ref: scrollBoxRef, className: 'reqore-nav-rail-scroll-box', "$scrollable": isExpanded, "$bleed": pad, children: (0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { vertical: true, gapSize: size, horizontalAlign: columnAlign, children: [before.map(renderPrimary), activeAt >= 0 && activeItem ? renderActiveGroup(activeItem) : null, after.map(renderPrimary), !expandable && itemsHidden.length ? ((0, jsx_runtime_1.jsx)(NavRailOverflow, { items: itemsHidden.map(function (i) { return ({ id: i.id, label: i.label, icon: i.icon }); }), size: size, placement: tipSide, ariaLabel: moreItemsLabel, tooltipSuffix: overflowTooltipSuffix, labelled: labelled, onSelect: onItemSelect, onOpenChange: onMenuToggle })) : null] }) }) }), expandable && hiddenWhenCollapsed > 0 ? ((0, jsx_runtime_1.jsx)(NavRailExpandToggle, { expanded: isExpanded, hiddenCount: hiddenWhenCollapsed, size: size, tipSide: tipSide, labelled: labelled, expandLabel: expandLabel, collapseLabel: collapseLabel, tooltipSuffix: overflowTooltipSuffix, onToggle: toggleExpanded })) : null, renderSlot(footer)] }) }) }));
 });
-export default ReqoreNavRail;
+exports.default = exports.ReqoreNavRail;
 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;
 //# sourceMappingURL=index.js.map