@qoretechnologies/reqore 0.78.0 → 0.78.1-pr.708.g9e025c6

package/dist/components/Tier/group.js

@@ -1,607 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReqoreTierGroup = exports.getTierStackItemStyle = exports.getTierSwipeStep = exports.getInitialTierIndex = exports.getTierStackOffset = exports.normalizeTierIndex = exports.TIER_STACK = exports.TIER_GROUP_DOT_MARK_FROM_SIZE = exports.TIER_GROUP_DOT_FROM_SIZE = exports.TIER_GROUP_PEEK_FROM_SIZE = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var polished_1 = require("polished");
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var use_context_selector_1 = require("use-context-selector");
-var sizes_1 = require("../../constants/sizes");
-var ThemeProvider_1 = __importDefault(require("../../containers/ThemeProvider"));
-var CustomThemeContext_1 = __importDefault(require("../../context/CustomThemeContext"));
-var colors_1 = require("../../helpers/colors");
-var utils_1 = require("../../helpers/utils");
-var useNarrowContainer_1 = require("../../hooks/useNarrowContainer");
-var usePrefersReducedMotion_1 = require("../../hooks/usePrefersReducedMotion");
-var useTheme_1 = require("../../hooks/useTheme");
-var Button_1 = __importDefault(require("../Button"));
-var TooltipComponent_1 = require("../TooltipComponent");
-/** How far a neighbour shows past the front tier, on either side, in px. */
-exports.TIER_GROUP_PEEK_FROM_SIZE = {
-    micro: 8,
-    tiny: 10,
-    small: 14,
-    normal: 20,
-    big: 24,
-    huge: 28,
-    massive: 32,
-};
-/** A dot's hit area, in px (the mark inside it is `TIER_GROUP_DOT_MARK_FROM_SIZE`). */
-exports.TIER_GROUP_DOT_FROM_SIZE = {
-    micro: 16,
-    tiny: 20,
-    small: 24,
-    normal: 28,
-    big: 32,
-    huge: 36,
-    massive: 40,
-};
-/** The dot itself, in px; the front tier's is a pill two and a half times as wide. */
-exports.TIER_GROUP_DOT_MARK_FROM_SIZE = {
-    micro: 4,
-    tiny: 5,
-    small: 6,
-    normal: 8,
-    big: 10,
-    huge: 12,
-    massive: 14,
-};
-/** How the stack looks and moves. */
-exports.TIER_STACK = {
-    /** A neighbour's scale and turn (degrees: its outer edge comes forward, facing the front). */
-    neighbourScale: 0.9,
-    neighbourRotate: 12,
-    /**
-     * How bright a neighbour is drawn, on a dark and on a light theme. Dimmed by brightness, not
-     * by opacity: a tier faded towards a page of nearly its own colour disappears, while a darker
-     * (or, on a light page, greyer) one reads as standing in the front tier's shadow.
-     */
-    neighbourBrightness: { dark: 0.65, light: 0.9 },
-    /** A tier two or more steps from the front: smaller still, and faded out. */
-    hiddenScale: 0.8,
-    /** Of the stack, for the turn: the distance to the viewer, in px. */
-    perspective: 900,
-    /** The switch: a curve that overshoots a little and settles, like a spring. */
-    duration: 480,
-    easing: 'cubic-bezier(0.22, 1.25, 0.36, 1)',
-    /** A swipe brings the next tier to the front past this share of the tier's width... */
-    swipeDistance: 0.18,
-    /** ...or faster than this, in px per ms. */
-    swipeVelocity: 0.35,
-    /** How far a press moves, in px, before it is a swipe and not a click. */
-    slop: 8,
-    /** How much a drag past an end moves the stack. */
-    resistance: 0.3,
-};
-/** `index` wrapped round (`loop`) or held to the ends of `count` tiers. */
-var normalizeTierIndex = function (index, count, loop) {
-    if (count <= 0) {
-        return 0;
-    }
-    if (loop) {
-        return ((index % count) + count) % count;
-    }
-    return Math.min(Math.max(index, 0), count - 1);
-};
-exports.normalizeTierIndex = normalizeTierIndex;
-/**
- * Steps from the front tier to tier `index`: negative on the left, positive on the right. With
- * `loop`, the shorter way round (a tie goes to the right).
- */
-var getTierStackOffset = function (index, front, count, loop) {
-    var offset = index - front;
-    if (!loop || count <= 1) {
-        return offset;
-    }
-    var forward = ((offset % count) + count) % count;
-    return forward > count / 2 ? forward - count : forward;
-};
-exports.getTierStackOffset = getTierStackOffset;
-/**
- * The tier in front at first: `defaultIndex` when given (held to the ends), else the first
- * highlighted tier, else the first.
- */
-var getInitialTierIndex = function (highlights, defaultIndex) {
-    if (!highlights.length) {
-        return 0;
-    }
-    if (typeof defaultIndex === 'number' && !Number.isNaN(defaultIndex)) {
-        return (0, exports.normalizeTierIndex)(Math.round(defaultIndex), highlights.length);
-    }
-    return Math.max(highlights.indexOf(true), 0);
-};
-exports.getInitialTierIndex = getInitialTierIndex;
-/**
- * What a released swipe does: `1` brings the next tier to the front (the stack was dragged to
- * the left), `-1` the previous one, `0` puts the front tier back. A swipe counts when it went
- * far enough (`TIER_STACK.swipeDistance` of the tier's `width`) or was quick enough
- * (`TIER_STACK.swipeVelocity`, in the direction it went).
- */
-var getTierSwipeStep = function (distance, velocity, width) {
-    if (Math.abs(distance) < exports.TIER_STACK.slop) {
-        return 0;
-    }
-    var far = width > 0 && Math.abs(distance) >= width * exports.TIER_STACK.swipeDistance;
-    var fast = Math.abs(velocity) >= exports.TIER_STACK.swipeVelocity && Math.sign(velocity) === Math.sign(distance);
-    if (!far && !fast) {
-        return 0;
-    }
-    return distance < 0 ? 1 : -1;
-};
-exports.getTierSwipeStep = getTierSwipeStep;
-var round = function (value) { return Math.round(value * 1000) / 1000; };
-/**
- * Where a tier sits in the stack, `position` steps from the front (fractional while a swipe is
- * under way): the front tier at full size; a neighbour scaled to `TIER_STACK.neighbourScale`,
- * dimmed to `brightness`, turned a little and moved out so that `peek` px of it show past the
- * front tier's edge; and a tier further away smaller again and faded out. With `reducedMotion`
- * the neighbours are not turned.
- */
-var getTierStackItemStyle = function (position, _a) {
-    var peek = _a.peek, _b = _a.brightness, brightness = _b === void 0 ? 1 : _b, reducedMotion = _a.reducedMotion;
-    var neighbourScale = exports.TIER_STACK.neighbourScale, neighbourRotate = exports.TIER_STACK.neighbourRotate, hiddenScale = exports.TIER_STACK.hiddenScale;
-    var distance = Math.abs(position);
-    var side = Math.sign(position);
-    // From the front to a neighbour, then from a neighbour to a hidden tier.
-    var near = Math.min(distance, 1);
-    var far = Math.min(Math.max(distance - 1, 0), 1);
-    var scale = 1 - near * (1 - neighbourScale) - far * (neighbourScale - hiddenScale);
-    // A scaled tier is moved out by half the width it lost, plus the peek, so its outer edge
-    // ends `peek` px past the front tier's (the percentage is of its own, unscaled width).
-    var percent = near * (1 - neighbourScale) * 50 + far * (neighbourScale - hiddenScale) * 50;
-    var pixels = (near + far) * peek;
-    var rotate = reducedMotion ? 0 : -side * near * neighbourRotate;
-    var dim = 1 - near * (1 - brightness);
-    var translate = "translateX(calc(".concat(round(side * percent), "% + ").concat(round(side * pixels), "px))");
-    return {
-        transform: "".concat(translate, " scale(").concat(round(scale), ")").concat(rotate ? " rotateY(".concat(round(rotate), "deg)") : ''),
-        filter: dim < 1 ? "brightness(".concat(round(dim), ")") : undefined,
-        opacity: round(1 - far),
-        zIndex: Math.max(1, 100 - Math.round(distance * 10)),
-    };
-};
-exports.getTierStackItemStyle = getTierStackItemStyle;
-var defaultStackItemLabel = function (name, index, count) {
-    return "".concat(name ? "".concat(name, ", ") : '').concat(index + 1, " of ").concat(count);
-};
-/** Layout only: the row (a grid of equal-height columns), or the stack above its controls. */
-var StyledTierGroup = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  min-width: 0;\n\n  ", "\n"], ["\n  position: relative;\n  min-width: 0;\n\n  ", "\n"])), function (_a) {
-    var $stack = _a.$stack, $focusColor = _a.$focusColor, $gap = _a.$gap, $minColumnWidth = _a.$minColumnWidth, $maxColumnWidth = _a.$maxColumnWidth;
-    return $stack
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: column;\n          align-items: stretch;\n          gap: ", "px;\n          border-radius: ", "px;\n          outline: none;\n\n          /* The stack takes the focus (it is the carousel the arrow keys move). */\n          &:focus-visible {\n            outline: 2px solid ", ";\n            outline-offset: 4px;\n          }\n        "], ["\n          display: flex;\n          flex-direction: column;\n          align-items: stretch;\n          gap: ", "px;\n          border-radius: ", "px;\n          outline: none;\n\n          /* The stack takes the focus (it is the carousel the arrow keys move). */\n          &:focus-visible {\n            outline: 2px solid ", ";\n            outline-offset: 4px;\n          }\n        "])), $gap, sizes_1.RADIUS_FROM_RADIUS_SIZE.normal, $focusColor) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          display: grid;\n          grid-template-columns: repeat(\n            auto-fit,\n            minmax(min(100%, ", "), ", ")\n          );\n          align-items: stretch;\n          justify-content: center;\n          gap: ", "px;\n        "], ["\n          display: grid;\n          grid-template-columns: repeat(\n            auto-fit,\n            minmax(min(100%, ", "), ", ")\n          );\n          align-items: stretch;\n          justify-content: center;\n          gap: ", "px;\n        "])), $minColumnWidth, $maxColumnWidth, $gap);
-});
-/**
- * The stack's frame: it takes the swipes and clips the neighbours at its sides, so a turned or
- * moving tier never widens the page. In the row it is not a box at all.
- */
-var StyledTierGroupViewport = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var $stack = _a.$stack, $dragging = _a.$dragging;
-    return $stack
-        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          position: relative;\n          /* Hidden where clip is not supported (which also clips the front tier's shadow). */\n          overflow-x: hidden;\n          overflow-x: clip;\n          touch-action: pan-y;\n\n          ", "\n        "], ["\n          position: relative;\n          /* Hidden where clip is not supported (which also clips the front tier's shadow). */\n          overflow-x: hidden;\n          overflow-x: clip;\n          touch-action: pan-y;\n\n          ", "\n        "])), $dragging && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              cursor: grabbing;\n              user-select: none;\n            "], ["\n              cursor: grabbing;\n              user-select: none;\n            "])))) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          display: contents;\n        "], ["\n          display: contents;\n        "])));
-});
-/** Every tier of the stack in one grid cell: the stack is as tall as its tallest tier. */
-var StyledTierGroupTrack = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var $stack = _a.$stack;
-    return $stack
-        ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          display: grid;\n          perspective: ", "px;\n        "], ["\n          display: grid;\n          perspective: ", "px;\n        "])), exports.TIER_STACK.perspective) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          display: contents;\n        "], ["\n          display: contents;\n        "])));
-});
-/** The switch: a tier glides on the spring curve; its dimming and fading settle sooner. */
-var TIER_STACK_TRANSITION = [
-    "transform ".concat(exports.TIER_STACK.duration, "ms ").concat(exports.TIER_STACK.easing),
-    "filter ".concat(Math.round(exports.TIER_STACK.duration * 0.6), "ms ease-out"),
-    "opacity ".concat(Math.round(exports.TIER_STACK.duration * 0.6), "ms ease-out"),
-].join(', ');
-/** One tier's cell. A grid of one, so the tier fills it: every tier is as tall as its row. */
-var StyledTierGroupItem = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: grid;\n  min-width: 0;\n\n  ", "\n"], ["\n  display: grid;\n  min-width: 0;\n\n  ", "\n"])), function (_a) {
-    var $stack = _a.$stack, $peek = _a.$peek, $animate = _a.$animate;
-    return $stack && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      position: relative;\n      grid-area: 1 / 1;\n      justify-self: center;\n      width: calc(100% - ", "px);\n      transform-origin: 50% 50%;\n      will-change: transform, filter, opacity;\n      transition: ", ";\n    "], ["\n      position: relative;\n      grid-area: 1 / 1;\n      justify-self: center;\n      width: calc(100% - ", "px);\n      transform-origin: 50% 50%;\n      will-change: transform, filter, opacity;\n      transition: ", ";\n    "])), $peek * 2, $animate ? TIER_STACK_TRANSITION : 'none');
-});
-/** Layout only: the previous button, the dots and the next button, centred under the stack. */
-var StyledTierGroupControls = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: ", "px;\n\n  .reqore-tier-group-dots {\n    display: flex;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: ", "px;\n\n  .reqore-tier-group-dots {\n    display: flex;\n    align-items: center;\n  }\n"])), function (_a) {
-    var $gap = _a.$gap;
-    return $gap;
-});
-/**
- * A dot: which tier is in front, and a way to bring any of them there. A plain button rather
- * than a `ReqoreButton` — a pager's dot is a small mark with a finger-sized hit area round it,
- * and a Reqore button has no shape for that.
- */
-var StyledTierGroupDot = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", "px;\n  height: ", "px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: ", "px;\n  background: none;\n  cursor: pointer;\n\n  &::before {\n    content: '';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    border-radius: ", "px;\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n"], ["\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", "px;\n  height: ", "px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: ", "px;\n  background: none;\n  cursor: pointer;\n\n  &::before {\n    content: '';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    border-radius: ", "px;\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n"])), function (_a) {
-    var $hit = _a.$hit;
-    return $hit;
-}, function (_a) {
-    var $hit = _a.$hit;
-    return $hit;
-}, function (_a) {
-    var $hit = _a.$hit;
-    return $hit;
-}, function (_a) {
-    var $mark = _a.$mark, $active = _a.$active;
-    return ($active ? Math.round($mark * 2.5) : $mark);
-}, function (_a) {
-    var $mark = _a.$mark;
-    return $mark;
-}, function (_a) {
-    var $mark = _a.$mark;
-    return $mark;
-}, function (_a) {
-    var $active = _a.$active, $color = _a.$color, $idleColor = _a.$idleColor;
-    return ($active ? $color : $idleColor);
-}, function (_a) {
-    var $animate = _a.$animate;
-    return $animate ? 'width 0.2s ease-out, background-color 0.2s ease-out' : 'none';
-}, function (_a) {
-    var $color = _a.$color;
-    return $color;
-});
-/** The front tier's name for a screen reader, said when it changes. Visually hidden. */
-var StyledTierGroupStatus = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n"])));
-exports.ReqoreTierGroup = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c, _d;
-    var children = _a.children, appearance = _a.appearance, size = _a.size, intent = _a.intent, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, tooltip = _a.tooltip, className = _a.className, _e = _a.minColumnWidth, minColumnWidth = _e === void 0 ? '240px' : _e, _f = _a.maxColumnWidth, maxColumnWidth = _f === void 0 ? '1fr' : _f, _g = _a.gapSize, gapSize = _g === void 0 ? 'big' : _g, _h = _a.mobileLayout, mobileLayout = _h === void 0 ? 'columns' : _h, _j = _a.mobileBreakpoint, mobileBreakpoint = _j === void 0 ? useNarrowContainer_1.NARROW_CONTAINER_BREAKPOINT_PX : _j, activeIndex = _a.activeIndex, defaultActiveIndex = _a.defaultActiveIndex, onActiveIndexChange = _a.onActiveIndexChange, _k = _a.loop, loop = _k === void 0 ? false : _k, _l = _a.stackLabel, stackLabel = _l === void 0 ? 'Plans' : _l, _m = _a.previousLabel, previousLabel = _m === void 0 ? 'Previous plan' : _m, _o = _a.nextLabel, nextLabel = _o === void 0 ? 'Next plan' : _o, _p = _a.stackItemLabel, stackItemLabel = _p === void 0 ? defaultStackItemLabel : _p, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["children", "appearance", "size", "intent", "customTheme", "inheritCustomTheme", "tooltip", "className", "minColumnWidth", "maxColumnWidth", "gapSize", "mobileLayout", "mobileBreakpoint", "activeIndex", "defaultActiveIndex", "onActiveIndexChange", "loop", "stackLabel", "previousLabel", "nextLabel", "stackItemLabel", "onKeyDown"]);
-    var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, undefined, undefined, inheritCustomTheme);
-    var parentCustomTheme = (0, use_context_selector_1.useContext)(CustomThemeContext_1.default);
-    // The group's theme reaches its tiers and its controls; an inherited one is passed on.
-    var cascadedCustomTheme = customTheme !== null && customTheme !== void 0 ? customTheme : (inheritCustomTheme === false ? undefined : parentCustomTheme);
-    var tiers = (0, react_1.useMemo)(function () {
-        return react_1.default.Children.toArray(children).filter(function (child) {
-            return (0, react_1.isValidElement)(child);
-        });
-    }, [children]);
-    var count = tiers.length;
-    var names = (0, react_1.useMemo)(function () { return tiers.map(function (tier) { return tier.props.name; }); }, [tiers]);
-    var _q = (0, useNarrowContainer_1.useNarrowContainer)(mobileBreakpoint), containerRef = _q[0], isNarrow = _q[1];
-    var isStack = mobileLayout === 'stack' && isNarrow && count > 0;
-    var reducedMotion = (0, usePrefersReducedMotion_1.usePrefersReducedMotion)();
-    var highlights = (0, react_1.useMemo)(function () { return tiers.map(function (tier) { return !!tier.props.highlight; }); }, [tiers]);
-    // The tier the user brought to the front. Until they do, the front follows the tiers, so a
-    // highlighted tier that arrives after the group mounted (the plans load) still starts there.
-    var _r = (0, react_1.useState)(undefined), chosenIndex = _r[0], setChosenIndex = _r[1];
-    var front = (0, exports.normalizeTierIndex)((_b = activeIndex !== null && activeIndex !== void 0 ? activeIndex : chosenIndex) !== null && _b !== void 0 ? _b : (0, exports.getInitialTierIndex)(highlights, defaultActiveIndex), count);
-    var rootRef = (0, react_1.useRef)(null);
-    var viewportRef = (0, react_1.useRef)(null);
-    var itemRefs = (0, react_1.useRef)([]);
-    var gestureRef = (0, react_1.useRef)(null);
-    var suppressClickRef = (0, react_1.useRef)(false);
-    var _s = (0, react_1.useState)(0), dragOffset = _s[0], setDragOffset = _s[1];
-    var _t = (0, react_1.useState)(false), isDragging = _t[0], setIsDragging = _t[1];
-    var setRootRef = (0, react_1.useCallback)(function (node) {
-        rootRef.current = node;
-        containerRef.current = node;
-        if (typeof ref === 'function') {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref, containerRef]);
-    var resolvedSize = size !== null && size !== void 0 ? size : 'normal';
-    var peek = exports.TIER_GROUP_PEEK_FROM_SIZE[resolvedSize];
-    var gap = sizes_1.GAP_FROM_SIZE[gapSize];
-    var colors = (0, react_1.useMemo)(function () {
-        var page = (0, colors_1.getOpaqueColor)((0, colors_1.getMainBackgroundColor)(theme));
-        var text = (0, colors_1.getOpaqueColor)((0, colors_1.getReadableColor)(theme, undefined, undefined, true));
-        var intentColor = intent ? theme.intents[intent] : undefined;
-        var active = intentColor ? (0, colors_1.getReadableAccentColor)(intentColor, page, 3) : text;
-        return {
-            active: active,
-            idle: (0, colors_1.getReadableAccentColor)((0, polished_1.mix)(0.4, text, page), page, 3),
-            neighbourBrightness: (0, colors_1.shouldDarken)(page)
-                ? exports.TIER_STACK.neighbourBrightness.light
-                : exports.TIER_STACK.neighbourBrightness.dark,
-        };
-    }, [theme, intent]);
-    var goTo = (0, react_1.useCallback)(function (target) {
-        if (!count) {
-            return;
-        }
-        var next = (0, exports.normalizeTierIndex)(target, count, loop);
-        if (next === front) {
-            return;
-        }
-        if (activeIndex === undefined) {
-            setChosenIndex(next);
-        }
-        onActiveIndexChange === null || onActiveIndexChange === void 0 ? void 0 : onActiveIndexChange(next);
-    }, [count, loop, front, activeIndex, onActiveIndexChange]);
-    // A card behind the front one is `inert`: out of the tab order, out of the accessibility
-    // tree and out of the pointer's reach (a press on it reaches the stack, which brings it to
-    // the front). Set on the element: React 18 has no prop for it.
-    (0, react_1.useLayoutEffect)(function () {
-        itemRefs.current.length = count;
-        itemRefs.current.forEach(function (item, index) {
-            if (!item) {
-                return;
-            }
-            if (isStack && index !== front) {
-                item.setAttribute('inert', '');
-            }
-            else {
-                item.removeAttribute('inert');
-            }
-        });
-    }, [isStack, front, count]);
-    // Focus inside the card that is leaving the front, or on a button that is about to be
-    // disabled, would be lost: keep it on the stack.
-    var keepFocusOnStack = (0, react_1.useCallback)(function () {
-        var _a;
-        var focused = document.activeElement;
-        if (focused && focused !== rootRef.current && ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(focused))) {
-            rootRef.current.focus({ preventScroll: true });
-        }
-    }, []);
-    var getItemWidth = (0, react_1.useCallback)(function () {
-        var viewport = viewportRef.current;
-        return viewport ? Math.max(viewport.clientWidth - peek * 2, 0) : 0;
-    }, [peek]);
-    var handleKeyDown = (0, react_1.useCallback)(function (event) {
-        var _a;
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-        if (!isStack ||
-            event.defaultPrevented ||
-            event.altKey ||
-            event.ctrlKey ||
-            event.metaKey) {
-            return;
-        }
-        var target = event.target;
-        // A key pressed in a portal (a popover a tier opened) bubbles here through React.
-        if (!event.currentTarget.contains(target) || (0, utils_1.isTextEntry)(target)) {
-            return;
-        }
-        var next;
-        switch (event.key) {
-            case 'ArrowLeft':
-                next = front - 1;
-                break;
-            case 'ArrowRight':
-                next = front + 1;
-                break;
-            case 'Home':
-                next = 0;
-                break;
-            case 'End':
-                next = count - 1;
-                break;
-            default:
-                return;
-        }
-        event.preventDefault();
-        if ((_a = itemRefs.current[front]) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) {
-            keepFocusOnStack();
-        }
-        goTo(next);
-    }, [onKeyDown, isStack, front, count, goTo, keepFocusOnStack]);
-    var finishGesture = (0, react_1.useCallback)(function (commit) {
-        var _a;
-        var gesture = gestureRef.current;
-        gestureRef.current = null;
-        if (!(gesture === null || gesture === void 0 ? void 0 : gesture.dragging)) {
-            return;
-        }
-        var viewport = viewportRef.current;
-        if ((_a = viewport === null || viewport === void 0 ? void 0 : viewport.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(viewport, gesture.pointerId)) {
-            viewport.releasePointerCapture(gesture.pointerId);
-        }
-        // The click that ends a drag is not a click on whatever it ended over.
-        suppressClickRef.current = true;
-        setIsDragging(false);
-        setDragOffset(0);
-        if (commit) {
-            var step = (0, exports.getTierSwipeStep)(gesture.lastX - gesture.startX, gesture.velocity, getItemWidth());
-            if (step) {
-                goTo(front + step);
-            }
-        }
-    }, [getItemWidth, goTo, front]);
-    var handlePointerDown = (0, react_1.useCallback)(function (event) {
-        suppressClickRef.current = false;
-        if (!isStack || count < 2 || (event.pointerType === 'mouse' && event.button !== 0)) {
-            return;
-        }
-        gestureRef.current = {
-            pointerId: event.pointerId,
-            startX: event.clientX,
-            startY: event.clientY,
-            lastX: event.clientX,
-            lastTime: event.timeStamp,
-            velocity: 0,
-            dragging: false,
-        };
-    }, [isStack, count]);
-    var handlePointerMove = (0, react_1.useCallback)(function (event) {
-        var _a;
-        var gesture = gestureRef.current;
-        if (!gesture || gesture.pointerId !== event.pointerId) {
-            return;
-        }
-        // A mouse let go outside the window: nothing is held on a move that should be a drag.
-        if (event.pointerType === 'mouse' && event.buttons === 0) {
-            finishGesture(false);
-            return;
-        }
-        var dx = event.clientX - gesture.startX;
-        var dy = event.clientY - gesture.startY;
-        if (!gesture.dragging) {
-            if (Math.abs(dx) < exports.TIER_STACK.slop && Math.abs(dy) < exports.TIER_STACK.slop) {
-                return;
-            }
-            // Mostly vertical: the page is being scrolled, not the stack swiped.
-            if (Math.abs(dy) >= Math.abs(dx)) {
-                gestureRef.current = null;
-                return;
-            }
-            gesture.dragging = true;
-            try {
-                (_a = viewportRef.current) === null || _a === void 0 ? void 0 : _a.setPointerCapture(event.pointerId);
-            }
-            catch (_b) {
-                // Capture only keeps the drag going outside the stack; it is not the mechanism.
-            }
-            setIsDragging(true);
-        }
-        var elapsed = event.timeStamp - gesture.lastTime;
-        if (elapsed > 0) {
-            gesture.velocity = (event.clientX - gesture.lastX) / elapsed;
-        }
-        gesture.lastX = event.clientX;
-        gesture.lastTime = event.timeStamp;
-        // Past an end, the stack gives a little and springs back.
-        var pastEnd = !loop && ((dx > 0 && front === 0) || (dx < 0 && front === count - 1));
-        setDragOffset(pastEnd ? dx * exports.TIER_STACK.resistance : dx);
-    }, [finishGesture, loop, front, count]);
-    var handlePointerUp = (0, react_1.useCallback)(function (event) {
-        var _a;
-        if (((_a = gestureRef.current) === null || _a === void 0 ? void 0 : _a.pointerId) === event.pointerId) {
-            finishGesture(true);
-        }
-    }, [finishGesture]);
-    var handlePointerCancel = (0, react_1.useCallback)(function () { return finishGesture(false); }, [finishGesture]);
-    var handleClickCapture = (0, react_1.useCallback)(function (event) {
-        if (suppressClickRef.current) {
-            suppressClickRef.current = false;
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }, []);
-    // A press on a neighbour (inert, so it lands on the stack) brings it to the front.
-    var handleViewportClick = (0, react_1.useCallback)(function (event) {
-        var frontItem = itemRefs.current[front];
-        if (!isStack || !frontItem || frontItem.contains(event.target)) {
-            return;
-        }
-        var rect = frontItem.getBoundingClientRect();
-        if (event.clientX < rect.left) {
-            goTo(front - 1);
-        }
-        else if (event.clientX > rect.right) {
-            goTo(front + 1);
-        }
-    }, [isStack, front, goTo]);
-    var handlePrevious = (0, react_1.useCallback)(function () {
-        if (!loop && front - 1 <= 0) {
-            keepFocusOnStack();
-        }
-        goTo(front - 1);
-    }, [loop, front, goTo, keepFocusOnStack]);
-    var handleNext = (0, react_1.useCallback)(function () {
-        if (!loop && front + 1 >= count - 1) {
-            keepFocusOnStack();
-        }
-        goTo(front + 1);
-    }, [loop, front, count, goTo, keepFocusOnStack]);
-    var itemWidth = isDragging ? getItemWidth() : 0;
-    // The tiers follow the finger, unless the user asked for less motion: then a swipe still
-    // switches them, at once, when it ends.
-    var dragProgress = isDragging && !reducedMotion && itemWidth > 0 ? dragOffset / itemWidth : 0;
-    var items = tiers.map(function (tier, index) {
-        var _a;
-        var handed = __assign(__assign({}, (appearance && !tier.props.appearance ? { appearance: appearance } : {})), (size && !tier.props.size ? { size: size } : {}));
-        var element = Object.keys(handed).length ? (0, react_1.cloneElement)(tier, handed) : tier;
-        var offset = isStack ? (0, exports.getTierStackOffset)(index, front, count, loop) : 0;
-        var isFront = isStack && index === front;
-        return ((0, jsx_runtime_1.jsx)(StyledTierGroupItem, __assign({ ref: function (node) {
-                itemRefs.current[index] = node;
-            }, className: "reqore-tier-group-item".concat(isFront ? ' reqore-tier-group-item-front' : ''), "$stack": isStack, "$peek": peek, "$animate": !isDragging && !reducedMotion }, (isStack
-            ? {
-                role: 'group',
-                'aria-roledescription': 'slide',
-                'aria-label': stackItemLabel(names[index], index, count),
-                'data-offset': offset,
-                style: (0, exports.getTierStackItemStyle)(offset + dragProgress, {
-                    peek: peek,
-                    brightness: colors.neighbourBrightness,
-                    reducedMotion: reducedMotion,
-                }),
-            }
-            : {}), { children: element }), (_a = tier.key) !== null && _a !== void 0 ? _a : index));
-    });
-    var root = ((0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, rest, (isStack
-        ? {
-            role: 'region',
-            'aria-roledescription': 'carousel',
-            'aria-label': (_c = rest['aria-label']) !== null && _c !== void 0 ? _c : stackLabel,
-            'data-active-index': front,
-            tabIndex: (_d = rest.tabIndex) !== null && _d !== void 0 ? _d : 0,
-        }
-        : {}), { "data-layout": isStack ? 'stack' : 'row', Component: StyledTierGroup, ref: setRootRef, tooltip: tooltip, className: "".concat(className || '', " reqore-tier-group"), onKeyDown: handleKeyDown, "$stack": isStack, "$focusColor": colors.active, "$gap": gap, "$minColumnWidth": minColumnWidth, "$maxColumnWidth": maxColumnWidth, children: [(0, jsx_runtime_1.jsx)(StyledTierGroupViewport, __assign({ ref: viewportRef, className: 'reqore-tier-group-viewport', "$stack": isStack, "$dragging": isDragging }, (isStack
-                ? {
-                    onPointerDown: handlePointerDown,
-                    onPointerMove: handlePointerMove,
-                    onPointerUp: handlePointerUp,
-                    onPointerCancel: handlePointerCancel,
-                    onClickCapture: handleClickCapture,
-                    onClick: handleViewportClick,
-                    onDragStart: function (event) { return event.preventDefault(); },
-                }
-                : {}), { children: (0, jsx_runtime_1.jsx)(StyledTierGroupTrack, { className: 'reqore-tier-group-track', "$stack": isStack, children: items }) })), isStack && count > 1 ? ((0, jsx_runtime_1.jsxs)(StyledTierGroupControls, { className: 'reqore-tier-group-controls', "$gap": gap, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { className: 'reqore-tier-group-previous', icon: 'ArrowLeftSLine', "aria-label": previousLabel, size: resolvedSize, intent: intent, circle: true, disabled: !loop && front === 0, onClick: handlePrevious }), (0, jsx_runtime_1.jsx)("div", { className: 'reqore-tier-group-dots', children: names.map(function (name, index) {
-                            var _a;
-                            return ((0, jsx_runtime_1.jsx)(StyledTierGroupDot, { type: 'button', className: "reqore-tier-group-dot".concat(index === front ? ' reqore-tier-group-dot-active' : ''), "aria-label": name || stackItemLabel(name, index, count), "aria-current": index === front ? 'true' : undefined, "$hit": exports.TIER_GROUP_DOT_FROM_SIZE[resolvedSize], "$mark": exports.TIER_GROUP_DOT_MARK_FROM_SIZE[resolvedSize], "$active": index === front, "$animate": !reducedMotion, "$color": colors.active, "$idleColor": colors.idle, onClick: function () { return goTo(index); } }, (_a = tiers[index].key) !== null && _a !== void 0 ? _a : index));
-                        }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { className: 'reqore-tier-group-next', icon: 'ArrowRightSLine', "aria-label": nextLabel, size: resolvedSize, intent: intent, circle: true, disabled: !loop && front === count - 1, onClick: handleNext })] })) : null, isStack ? ((0, jsx_runtime_1.jsx)(StyledTierGroupStatus, { "aria-live": 'polite', className: 'reqore-tier-group-status', children: stackItemLabel(names[front], front, count) })) : null] })));
-    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { theme: theme, customTheme: cascadedCustomTheme, children: root }));
-}));
-exports.default = exports.ReqoreTierGroup;
-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;
-//# sourceMappingURL=group.js.map