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

package/dist/components/Button/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,6 +14,39 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -24,33 +58,38 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { REQORE_MARQUEE_HOST, REQORE_MARQUEE_TEXT } from '../../hooks/useMarqueeOnHover.js';
-import { size } from 'lodash';
-import { rgba, saturate, tint } from 'polished';
-import { forwardRef, memo, useCallback, useMemo } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import styled, { css, keyframes } from 'styled-components';
-import { CONTROL_ICON_OPACITY } from '../../constants/colors.js';
-import { CONTROL_HORIZONTAL_PADDING_FROM_SIZE, CONTROL_TEXT_FROM_SIZE, CONTROL_VERTICAL_PADDING_FROM_SIZE, CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE, ICON_FROM_SIZE, INDICATOR_SIZE_TO_PX, PADDING_FROM_SIZE, PILL_RADIUS_MODIFIER, resolveRadius, SIZE_TO_PX, } from '../../constants/sizes.js';
-import { changeLightness, getGradientMix, getReadableColor, getReadableColorFrom, isAchromatic, } from '../../helpers/colors.js';
-import { shortcutHasModifier } from '../../helpers/shortcuts.js';
-import { omitStyleProps } from '../../helpers/styled.js';
-import { alignToFlexAlign, getOneLessSize } from '../../helpers/utils.js';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
-import { useReqoreProperty } from '../../hooks/useReqoreContext.js';
-import { useReqoreEffect } from '../../hooks/useReqoreEffect.js';
-import { useReqoreTheme } from '../../hooks/useTheme.js';
-import { ActiveIconScale, DisabledElement, InactiveIconScale, RaisedElement, ReadOnlyElement, ScaleIconOnHover, StyledActiveContent, StyledContent, StyledInActiveContent, StyledInvisibleContent, } from '../../styles.js';
-import { getPrimaryGradient, ReqoreTextEffect, StyledEffect, } from '../Effect/index.js';
-import ReqoreIcon from '../Icon/index.js';
-import { ReqoreKeyboardShortcut } from '../KeyboardShortcut/index.js';
-import { ReqoreHorizontalSpacer, ReqoreSpacer } from '../Spacer/index.js';
-import ReqoreTag from '../Tag/index.js';
-import ReqoreTagGroup from '../Tag/group.js';
-import { ReqoreTooltipComponent } from '../TooltipComponent/index.js';
-var indicatorPulseKeyframes = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: scale(1);\n    opacity: 0.55;\n  }\n  70% {\n    opacity: 0;\n  }\n  100% {\n    transform: scale(2.6);\n    opacity: 0;\n  }\n"], ["\n  0% {\n    transform: scale(1);\n    opacity: 0.55;\n  }\n  70% {\n    opacity: 0;\n  }\n  100% {\n    transform: scale(2.6);\n    opacity: 0;\n  }\n"])));
-export var StyledButtonIndicator = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  background-color: ", ";\n  pointer-events: none;\n\n  ", "\n\n  ", ";\n"], ["\n  position: absolute;\n  z-index: 2;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  background-color: ", ";\n  pointer-events: none;\n\n  ", "\n\n  ", ";\n"])), function (_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonBadge = exports.StyledButtonContent = exports.StyledButton = exports.StyledAnimatedTextWrapper = exports.StyledButtonIndicator = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var useMarqueeOnHover_1 = require("../../hooks/useMarqueeOnHover");
+var lodash_1 = require("lodash");
+var polished_1 = require("polished");
+var react_1 = require("react");
+var react_hotkeys_hook_1 = require("react-hotkeys-hook");
+var styled_components_1 = __importStar(require("styled-components"));
+var colors_1 = require("../../constants/colors");
+var sizes_1 = require("../../constants/sizes");
+var colors_2 = require("../../helpers/colors");
+var shortcuts_1 = require("../../helpers/shortcuts");
+var styled_1 = require("../../helpers/styled");
+var utils_1 = require("../../helpers/utils");
+var useCombinedRefs_1 = require("../../hooks/useCombinedRefs");
+var useReqoreContext_1 = require("../../hooks/useReqoreContext");
+var useReqoreEffect_1 = require("../../hooks/useReqoreEffect");
+var useTheme_1 = require("../../hooks/useTheme");
+var styles_1 = require("../../styles");
+var Effect_1 = require("../Effect");
+var Icon_1 = __importDefault(require("../Icon"));
+var KeyboardShortcut_1 = require("../KeyboardShortcut");
+var Spacer_1 = require("../Spacer");
+var Tag_1 = __importDefault(require("../Tag"));
+var group_1 = __importDefault(require("../Tag/group"));
+var TooltipComponent_1 = require("../TooltipComponent");
+var indicatorPulseKeyframes = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: scale(1);\n    opacity: 0.55;\n  }\n  70% {\n    opacity: 0;\n  }\n  100% {\n    transform: scale(2.6);\n    opacity: 0;\n  }\n"], ["\n  0% {\n    transform: scale(1);\n    opacity: 0.55;\n  }\n  70% {\n    opacity: 0;\n  }\n  100% {\n    transform: scale(2.6);\n    opacity: 0;\n  }\n"])));
+exports.StyledButtonIndicator = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  background-color: ", ";\n  pointer-events: none;\n\n  ", "\n\n  ", ";\n"], ["\n  position: absolute;\n  z-index: 2;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  background-color: ", ";\n  pointer-events: none;\n\n  ", "\n\n  ", ";\n"])), function (_a) {
     var $diameter = _a.$diameter;
     return $diameter;
 }, function (_a) {
@@ -62,16 +101,16 @@ export var StyledButtonIndicator = styled.span(templateObject_4 || (templateObje
 }, function (_a) {
     var $position = _a.$position, $offset = _a.$offset;
     var _b = $position.split('-'), vertical = _b[0], horizontal = _b[1];
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", ": ", "px;\n      ", ": ", "px;\n    "], ["\n      ", ": ", "px;\n      ", ": ", "px;\n    "])), vertical, $offset, horizontal, $offset);
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", ": ", "px;\n      ", ": ", "px;\n    "], ["\n      ", ": ", "px;\n      ", ": ", "px;\n    "])), vertical, $offset, horizontal, $offset);
 }, function (_a) {
     var $pulse = _a.$pulse, $color = _a.$color;
     return $pulse
-        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          &::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            border-radius: 50%;\n            background-color: ", ";\n            animation: ", " 1.6s ease-out infinite;\n          }\n        "], ["\n          &::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            border-radius: 50%;\n            background-color: ", ";\n            animation: ", " 1.6s ease-out infinite;\n          }\n        "])), $color, indicatorPulseKeyframes) : undefined;
+        ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          &::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            border-radius: 50%;\n            background-color: ", ";\n            animation: ", " 1.6s ease-out infinite;\n          }\n        "], ["\n          &::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            border-radius: 50%;\n            background-color: ", ";\n            animation: ", " 1.6s ease-out infinite;\n          }\n        "])), $color, indicatorPulseKeyframes) : undefined;
 });
 var getButtonMainColor = function (theme, color, effect) {
-    var primary = getPrimaryGradient(effect === null || effect === void 0 ? void 0 : effect.gradient);
+    var primary = (0, Effect_1.getPrimaryGradient)(effect === null || effect === void 0 ? void 0 : effect.gradient);
     if (primary) {
-        return getGradientMix(theme, primary.colors);
+        return (0, colors_2.getGradientMix)(theme, primary.colors);
     }
     if (color) {
         return color;
@@ -81,61 +120,61 @@ var getButtonMainColor = function (theme, color, effect) {
 var getButtonTextColor = function (_a) {
     var minimal = _a.minimal, transparent = _a.transparent, color = _a.color, theme = _a.theme;
     return minimal || transparent
-        ? isAchromatic(color)
-            ? getReadableColorFrom(theme.originalMain, true)
-            : saturate(1, tint(0.8, color))
-        : getReadableColorFrom(color, true);
+        ? (0, colors_2.isAchromatic)(color)
+            ? (0, colors_2.getReadableColorFrom)(theme.originalMain, true)
+            : (0, polished_1.saturate)(1, (0, polished_1.tint)(0.8, color))
+        : (0, colors_2.getReadableColorFrom)(color, true);
 };
-export var StyledAnimatedTextWrapper = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: 5px;\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"], ["\n  min-width: 5px;\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"])), function (_a) {
+exports.StyledAnimatedTextWrapper = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: 5px;\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"], ["\n  min-width: 5px;\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
     var textAlign = _a.textAlign;
-    return alignToFlexAlign(textAlign);
+    return (0, utils_1.alignToFlexAlign)(textAlign);
 });
-export var StyledButton = styled(StyledEffect).withConfig({
+exports.StyledButton = (0, styled_components_1.default)(Effect_1.StyledEffect).withConfig({
     // A containing ControlGroup can propagate its `fill` layout flag through
     // polymorphic controls such as Dropdown. The flag is meaningful to the
     // group, but it is not a valid boolean attribute for the rendered button.
-    shouldForwardProp: omitStyleProps('fill'),
+    shouldForwardProp: (0, styled_1.omitStyleProps)('fill'),
 })(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  font-weight: 570;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: ", ";\n  font-size: ", "px;\n  outline-offset: -2px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  flex: ", ";\n  flex-shrink: ", ";\n  flex-grow: ", ";\n  align-self: ", ";\n\n  border-radius: ", ";\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", ";\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  &:disabled {\n    ", ";\n  }\n\n  &:focus,\n  &:active {\n    outline: 2px solid\n      ", ";\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-top: ", "px;\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  font-weight: 570;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: ", ";\n  font-size: ", "px;\n  outline-offset: -2px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  flex: ", ";\n  flex-shrink: ", ";\n  flex-grow: ", ";\n  align-self: ", ";\n\n  border-radius: ", ";\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", ";\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  &:disabled {\n    ", ";\n  }\n\n  &:focus,\n  &:active {\n    outline: 2px solid\n      ", ";\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-top: ", "px;\n    color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, color = _a.color, flat = _a.flat, effect = _a.effect;
-    return !flat ? "1px solid ".concat(changeLightness(getButtonMainColor(theme, color, effect), 0.1)) : 0;
+    return !flat ? "1px solid ".concat((0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1)) : 0;
 }, function (_a) {
     var size = _a.size, compact = _a.compact, _b = _a.verticalPadding, verticalPadding = _b === void 0 ? 'normal' : _b, square = _a.square;
-    return "".concat(CONTROL_VERTICAL_PADDING_FROM_SIZE[size] +
-        CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding], "px ").concat(square
+    return "".concat(sizes_1.CONTROL_VERTICAL_PADDING_FROM_SIZE[size] +
+        sizes_1.CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding], "px ").concat(square
         ? 0
         : compact
-            ? CONTROL_VERTICAL_PADDING_FROM_SIZE[size]
-            : CONTROL_HORIZONTAL_PADDING_FROM_SIZE[size], "px");
+            ? sizes_1.CONTROL_VERTICAL_PADDING_FROM_SIZE[size]
+            : sizes_1.CONTROL_HORIZONTAL_PADDING_FROM_SIZE[size], "px");
 }, function (_a) {
     var size = _a.size;
-    return CONTROL_TEXT_FROM_SIZE[size];
+    return sizes_1.CONTROL_TEXT_FROM_SIZE[size];
 }, function (_a) {
     var size = _a.size, _b = _a.verticalPadding, verticalPadding = _b === void 0 ? 'normal' : _b;
-    return SIZE_TO_PX[size] + CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2;
+    return sizes_1.SIZE_TO_PX[size] + sizes_1.CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2;
 }, function (_a) {
     var size = _a.size, square = _a.square, _b = _a.verticalPadding, verticalPadding = _b === void 0 ? 'normal' : _b;
     return square
-        ? SIZE_TO_PX[size] + CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2
-        : SIZE_TO_PX[size];
+        ? sizes_1.SIZE_TO_PX[size] + sizes_1.CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2
+        : sizes_1.SIZE_TO_PX[size];
 }, function (_a) {
     var square = _a.square, size = _a.size, _b = _a.verticalPadding, verticalPadding = _b === void 0 ? 'normal' : _b;
     return square
-        ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          width: ", "px;\n        "], ["\n          width: ", "px;\n        "])), SIZE_TO_PX[size] +
-            CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2) : null;
+        ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          width: ", "px;\n        "], ["\n          width: ", "px;\n        "])), sizes_1.SIZE_TO_PX[size] +
+            sizes_1.CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2) : null;
 }, function (_a) {
     var square = _a.square, maxWidth = _a.maxWidth, fluid = _a.fluid, fixed = _a.fixed, size = _a.size, _b = _a.verticalPadding, verticalPadding = _b === void 0 ? 'normal' : _b;
     return square
-        ? "".concat(SIZE_TO_PX[size] + CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2, "px")
+        ? "".concat(sizes_1.SIZE_TO_PX[size] + sizes_1.CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2, "px")
         : maxWidth || (fluid && !fixed ? '100%' : undefined);
 }, function (_a) {
     var wrap = _a.wrap, description = _a.description;
     return !wrap && !description
-        ? css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          max-height: ", "px;\n        "], ["\n          max-height: ", "px;\n        "])), function (_a) {
+        ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          max-height: ", "px;\n        "], ["\n          max-height: ", "px;\n        "])), function (_a) {
             var size = _a.size, _b = _a.verticalPadding, verticalPadding = _b === void 0 ? 'normal' : _b;
-            return SIZE_TO_PX[size] + CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2;
+            return sizes_1.SIZE_TO_PX[size] + sizes_1.CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2;
         }) : null;
 }, function (_a) {
     var fluid = _a.fluid, fixed = _a.fixed;
@@ -155,126 +194,126 @@ export var StyledButton = styled(StyledEffect).withConfig({
         ? undefined
         : circle
             ? '9999px'
-            : "".concat(resolveRadius(size, radiusSize) * (pill ? PILL_RADIUS_MODIFIER : 1), "px");
+            : "".concat((0, sizes_1.resolveRadius)(size, radiusSize) * (pill ? sizes_1.PILL_RADIUS_MODIFIER : 1), "px");
 }, function (_a) {
     var minimal = _a.minimal, color = _a.color, theme = _a.theme, transparent = _a.transparent, effect = _a.effect;
     if (transparent) {
         return 'transparent';
     }
     if (minimal) {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), rgba(getButtonMainColor(theme, color, effect), 0.2));
+        return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), (0, polished_1.rgba)(getButtonMainColor(theme, color, effect), 0.2));
     }
     return color;
 }, function (_a) {
     var color = _a.color, minimal = _a.minimal, transparent = _a.transparent, theme = _a.theme, effect = _a.effect;
     var finalColor = getButtonMainColor(theme, color, effect);
     return getButtonTextColor({ minimal: minimal, transparent: transparent, color: finalColor, theme: theme });
-}, InactiveIconScale, function (_a) {
+}, styles_1.InactiveIconScale, function (_a) {
     var raised = _a.raised, flat = _a.flat, transparent = _a.transparent;
-    return raised && flat && !transparent && RaisedElement;
+    return raised && flat && !transparent && styles_1.RaisedElement;
 }, function (_a) {
     var readOnly = _a.readOnly, animate = _a.animate, active = _a.active, theme = _a.theme, color = _a.color, effect = _a.effect;
     return !readOnly && !active
-        ? css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          &:not(:disabled) {\n            ", "\n\n            cursor: pointer;\n            transition: all 0.2s ease-out;\n\n            &:active {\n              outline: 3px solid ", ";\n              outline-offset: -3px;\n              transition: none;\n            }\n\n            &:hover:not(:active) {\n              outline: 2px solid ", ";\n              transition: none;\n            }\n\n            &:hover,\n            &:active {\n              border-color: ", ";\n              background-color: ", ";\n              color: ", "\n                ", ";\n            }\n          }\n        "], ["\n          &:not(:disabled) {\n            ", "\n\n            cursor: pointer;\n            transition: all 0.2s ease-out;\n\n            &:active {\n              outline: 3px solid ", ";\n              outline-offset: -3px;\n              transition: none;\n            }\n\n            &:hover:not(:active) {\n              outline: 2px solid ", ";\n              transition: none;\n            }\n\n            &:hover,\n            &:active {\n              border-color: ", ";\n              background-color: ", ";\n              color: ", "\n                ", ";\n            }\n          }\n        "])), ScaleIconOnHover, changeLightness(getButtonMainColor(theme, color, effect), 0.25), changeLightness(getButtonMainColor(theme, color, effect), 0.25), function (_a) {
+        ? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          &:not(:disabled) {\n            ", "\n\n            cursor: pointer;\n            transition: all 0.2s ease-out;\n\n            &:active {\n              outline: 3px solid ", ";\n              outline-offset: -3px;\n              transition: none;\n            }\n\n            &:hover:not(:active) {\n              outline: 2px solid ", ";\n              transition: none;\n            }\n\n            &:hover,\n            &:active {\n              border-color: ", ";\n              background-color: ", ";\n              color: ", "\n                ", ";\n            }\n          }\n        "], ["\n          &:not(:disabled) {\n            ", "\n\n            cursor: pointer;\n            transition: all 0.2s ease-out;\n\n            &:active {\n              outline: 3px solid ", ";\n              outline-offset: -3px;\n              transition: none;\n            }\n\n            &:hover:not(:active) {\n              outline: 2px solid ", ";\n              transition: none;\n            }\n\n            &:hover,\n            &:active {\n              border-color: ", ";\n              background-color: ", ";\n              color: ", "\n                ", ";\n            }\n          }\n        "])), styles_1.ScaleIconOnHover, (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.25), (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.25), function (_a) {
             var flat = _a.flat, theme = _a.theme, color = _a.color;
-            return flat ? undefined : changeLightness(getButtonMainColor(theme, color, effect), 0.25);
+            return flat ? undefined : (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.25);
         }, function (_a) {
             var theme = _a.theme, color = _a.color, minimal = _a.minimal, transparent = _a.transparent;
             return minimal || transparent
-                ? rgba(changeLightness(getButtonMainColor(theme, color, effect), 0.1), transparent ? 0.2 : 0.4)
-                : changeLightness(getButtonMainColor(theme, color), 0.05);
+                ? (0, polished_1.rgba)((0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1), transparent ? 0.2 : 0.4)
+                : (0, colors_2.changeLightness)(getButtonMainColor(theme, color), 0.05);
         }, function (_a) {
             var theme = _a.theme, color = _a.color, minimal = _a.minimal, transparent = _a.transparent, effect = _a.effect;
             var finalColor = getButtonMainColor(theme, color, effect);
             return minimal || transparent
-                ? isAchromatic(finalColor)
-                    ? getReadableColorFrom(theme.originalMain)
-                    : saturate(1, tint(0.9, finalColor))
-                : getReadableColorFrom(finalColor);
+                ? (0, colors_2.isAchromatic)(finalColor)
+                    ? (0, colors_2.getReadableColorFrom)(theme.originalMain)
+                    : (0, polished_1.saturate)(1, (0, polished_1.tint)(0.9, finalColor))
+                : (0, colors_2.getReadableColorFrom)(finalColor);
         }, animate
-            ? css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                      cursor: pointer;\n\n                      ", " {\n                        transform: translateY(150%);\n                        filter: blur(10px);\n                        opacity: 0;\n                      }\n\n                      ", " {\n                        transform: translateY(0px);\n                        filter: blur(0);\n                        opacity: 1;\n                      }\n                    "], ["\n                      cursor: pointer;\n\n                      ", " {\n                        transform: translateY(150%);\n                        filter: blur(10px);\n                        opacity: 0;\n                      }\n\n                      ", " {\n                        transform: translateY(0px);\n                        filter: blur(0);\n                        opacity: 1;\n                      }\n                    "])), StyledInActiveContent, StyledActiveContent) : undefined) : readOnly
-        ? css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          ", ";\n        "], ["\n          ", ";\n        "])), ReadOnlyElement) : undefined;
+            ? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                      cursor: pointer;\n\n                      ", " {\n                        transform: translateY(150%);\n                        filter: blur(10px);\n                        opacity: 0;\n                      }\n\n                      ", " {\n                        transform: translateY(0px);\n                        filter: blur(0);\n                        opacity: 1;\n                      }\n                    "], ["\n                      cursor: pointer;\n\n                      ", " {\n                        transform: translateY(150%);\n                        filter: blur(10px);\n                        opacity: 0;\n                      }\n\n                      ", " {\n                        transform: translateY(0px);\n                        filter: blur(0);\n                        opacity: 1;\n                      }\n                    "])), styles_1.StyledInActiveContent, styles_1.StyledActiveContent) : undefined) : readOnly
+        ? (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          ", ";\n        "], ["\n          ", ";\n        "])), styles_1.ReadOnlyElement) : undefined;
 }, function (_a) {
     var active = _a.active, flat = _a.flat, theme = _a.theme, color = _a.color, effect = _a.effect;
     if (active) {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        cursor: pointer;\n        background-color: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          border-color: ", ";\n        }\n\n        ", "\n      "], ["\n        cursor: pointer;\n        background-color: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          border-color: ", ";\n        }\n\n        ", "\n      "])), changeLightness(getButtonMainColor(theme, color, effect), 0.1), getReadableColor({ main: changeLightness(getButtonMainColor(theme, color, effect), 0.1) }, undefined, undefined), flat
+        return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        cursor: pointer;\n        background-color: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          border-color: ", ";\n        }\n\n        ", "\n      "], ["\n        cursor: pointer;\n        background-color: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          border-color: ", ";\n        }\n\n        ", "\n      "])), (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1), (0, colors_2.getReadableColor)({ main: (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1) }, undefined, undefined), flat
             ? undefined
-            : changeLightness(getButtonMainColor(theme, color, effect), 0.175), flat
+            : (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.175), flat
             ? undefined
-            : changeLightness(getButtonMainColor(theme, color, effect), 0.275), ActiveIconScale);
+            : (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.275), styles_1.ActiveIconScale);
     }
-}, DisabledElement, function (_a) {
+}, styles_1.DisabledElement, function (_a) {
     var theme = _a.theme, color = _a.color, effect = _a.effect;
-    return changeLightness(getButtonMainColor(theme, color, effect), 0.1);
+    return (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1);
 }, function (_a) {
     var minimal = _a.minimal, theme = _a.theme, color = _a.color, effect = _a.effect;
-    return minimal ? undefined : changeLightness(getButtonMainColor(theme, color, effect), 0.1);
+    return minimal ? undefined : (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1);
 }, function (_a) {
     var size = _a.size;
-    return PADDING_FROM_SIZE[size] / 2;
+    return sizes_1.PADDING_FROM_SIZE[size] / 2;
 }, function (_a) {
     var theme = _a.theme, color = _a.color, minimal = _a.minimal, transparent = _a.transparent;
-    return rgba(getButtonTextColor({ minimal: minimal, transparent: transparent, color: color, theme: theme }), 0.7);
+    return (0, polished_1.rgba)(getButtonTextColor({ minimal: minimal, transparent: transparent, color: color, theme: theme }), 0.7);
 });
-export var StyledButtonContent = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: ", "px;\n  flex: 1;\n  flex-shrink: 0;\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: ", "px;\n  flex: 1;\n  flex-shrink: 0;\n\n  ", "\n"])), function (_a) {
+exports.StyledButtonContent = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: ", "px;\n  flex: 1;\n  flex-shrink: 0;\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: ", "px;\n  flex: 1;\n  flex-shrink: 0;\n\n  ", "\n"])), function (_a) {
     var size = _a.size;
-    return ICON_FROM_SIZE[size];
+    return sizes_1.ICON_FROM_SIZE[size];
 }, function (_a) {
     var wrap = _a.wrap, description = _a.description;
     return !wrap && !description
-        ? css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          max-height: ", "px;\n        "], ["\n          max-height: ", "px;\n        "])), function (_a) {
+        ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          max-height: ", "px;\n        "], ["\n          max-height: ", "px;\n        "])), function (_a) {
             var size = _a.size;
-            return SIZE_TO_PX[size];
+            return sizes_1.SIZE_TO_PX[size];
         }) : null;
 });
-export var ButtonBadge = memo(function (_a) {
+exports.ButtonBadge = (0, react_1.memo)(function (_a) {
     var wrapGroup = _a.wrapGroup, compact = _a.compact, active = _a.active, _b = _a.margin, margin = _b === void 0 ? 'left' : _b, props = __rest(_a, ["wrapGroup", "compact", "active", "margin"]);
-    var renderTag = useCallback(function (_a) {
+    var renderTag = (0, react_1.useCallback)(function (_a) {
         var _b;
         var size = _a.size, color = _a.color, theme = _a.theme, content = _a.content, key = _a.key;
-        return (_jsx(ReqoreTag, __assign({ size: getOneLessSize(size), asBadge: true, color: color, customTheme: theme, className: 'reqore-button-badge', labelAlign: 'center', minimal: !active && !((_b = content === null || content === void 0 ? void 0 : content.effect) === null || _b === void 0 ? void 0 : _b.gradient) }, (typeof content === 'string' || typeof content === 'number'
+        return ((0, jsx_runtime_1.jsx)(Tag_1.default, __assign({ size: (0, utils_1.getOneLessSize)(size), asBadge: true, color: color, customTheme: theme, className: 'reqore-button-badge', labelAlign: 'center', minimal: !active && !((_b = content === null || content === void 0 ? void 0 : content.effect) === null || _b === void 0 ? void 0 : _b.gradient) }, (typeof content === 'string' || typeof content === 'number'
             ? { label: content }
             : content)), key));
     }, [props]);
     var content = Array.isArray(props.content) ? props.content : [props.content];
-    var leftBadges = useMemo(function () {
+    var leftBadges = (0, react_1.useMemo)(function () {
         return content.filter(function (badge) { return typeof badge === 'string' || typeof badge === 'number' || !(badge === null || badge === void 0 ? void 0 : badge.align); });
     }, [content]);
-    var rightBadges = useMemo(function () {
+    var rightBadges = (0, react_1.useMemo)(function () {
         return content.filter(function (badge) {
             return typeof badge !== 'string' && typeof badge !== 'number' && (badge === null || badge === void 0 ? void 0 : badge.align) === 'right';
         });
     }, [content]);
-    var middleBadges = useMemo(function () {
+    var middleBadges = (0, react_1.useMemo)(function () {
         return content.filter(function (badge) {
             return typeof badge !== 'string' && typeof badge !== 'number' && (badge === null || badge === void 0 ? void 0 : badge.align) === 'center';
         });
     }, [content]);
-    var buildContent = useCallback(function (badge) {
+    var buildContent = (0, react_1.useCallback)(function (badge) {
         if (typeof badge === 'string' || typeof badge === 'number') {
             return { label: badge, align: undefined };
         }
         return __assign(__assign({}, badge), { align: undefined });
     }, []);
-    return (_jsxs(_Fragment, { children: [margin === 'left' && (_jsx(ReqoreSpacer, { width: props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1), height: !props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2 })), size(leftBadges) ? (_jsx(ReqoreTagGroup, { wrap: wrapGroup, align: 'left', children: leftBadges.map(function (badge, index) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [margin === 'left' && ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: props.wrap ? undefined : sizes_1.PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1), height: !props.wrap ? undefined : sizes_1.PADDING_FROM_SIZE[props.size] / 2 })), (0, lodash_1.size)(leftBadges) ? ((0, jsx_runtime_1.jsx)(group_1.default, { wrap: wrapGroup, align: 'left', children: leftBadges.map(function (badge, index) {
                     return renderTag(__assign(__assign({}, props), { content: buildContent(badge), key: index }));
-                }) })) : null, size(middleBadges) ? (_jsx(ReqoreTagGroup, { wrap: wrapGroup, fluid: true, align: 'center', children: middleBadges.map(function (badge, index) {
+                }) })) : null, (0, lodash_1.size)(middleBadges) ? ((0, jsx_runtime_1.jsx)(group_1.default, { wrap: wrapGroup, fluid: true, align: 'center', children: middleBadges.map(function (badge, index) {
                     return renderTag(__assign(__assign({}, props), { content: buildContent(badge), key: index }));
-                }) })) : null, size(rightBadges) ? (_jsx(ReqoreTagGroup, { wrap: wrapGroup, align: 'right', children: rightBadges.map(function (badge, index) {
+                }) })) : null, (0, lodash_1.size)(rightBadges) ? ((0, jsx_runtime_1.jsx)(group_1.default, { wrap: wrapGroup, align: 'right', children: rightBadges.map(function (badge, index) {
                     return renderTag(__assign(__assign({}, props), { content: buildContent(badge), key: index }));
                 }) })) : null] }));
 });
 /**
  * Primary Reqore button component that supports intents, icons, and badges.
  */
-var ReqoreButton = memo(forwardRef(function (_a, ref) {
-    var _b, _c;
-    var icon = _a.icon, _d = _a.size, size = _d === void 0 ? 'normal' : _d, minimal = _a.minimal, transparent = _a.transparent, children = _a.children, tooltip = _a.tooltip, className = _a.className, fluid = _a.fluid, fixed = _a.fixed, alignSelf = _a.alignSelf, intent = _a.intent, active = _a.active, flat = _a.flat, rightIcon = _a.rightIcon, customTheme = _a.customTheme, wrap = _a.wrap, readOnly = _a.readOnly, badge = _a.badge, indicator = _a.indicator, description = _a.description, maxWidth = _a.maxWidth, textAlignProp = _a.textAlign, effect = _a.effect, labelEffect = _a.labelEffect, descriptionEffect = _a.descriptionEffect, leftIconColor = _a.leftIconColor, rightIconColor = _a.rightIconColor, iconColor = _a.iconColor, iconsAlignProp = _a.iconsAlign, leftIconProps = _a.leftIconProps, rightIconProps = _a.rightIconProps, label = _a.label, compact = _a.compact, square = _a.square, as = _a.as, animated = _a.animated, loading = _a.loading, shortcut = _a.shortcut, shortcutHint = _a.shortcutHint, loadingIconType = _a.loadingIconType, rest = __rest(_a, ["icon", "size", "minimal", "transparent", "children", "tooltip", "className", "fluid", "fixed", "alignSelf", "intent", "active", "flat", "rightIcon", "customTheme", "wrap", "readOnly", "badge", "indicator", "description", "maxWidth", "textAlign", "effect", "labelEffect", "descriptionEffect", "leftIconColor", "rightIconColor", "iconColor", "iconsAlign", "leftIconProps", "rightIconProps", "label", "compact", "square", "as", "animated", "loading", "shortcut", "shortcutHint", "loadingIconType"]);
-    var animations = useReqoreProperty('animations');
-    var shortcutHintsEnabled = useReqoreProperty('shortcutHints');
-    var theme = useReqoreTheme('main', customTheme, intent);
-    var fixedEffect = useReqoreEffect('buttons', theme, effect);
-    var targetRef = useCombinedRefs(ref).targetRef;
+var ReqoreButton = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
+    var _b, _c, _d;
+    var icon = _a.icon, _e = _a.size, size = _e === void 0 ? 'normal' : _e, minimal = _a.minimal, transparent = _a.transparent, children = _a.children, tooltip = _a.tooltip, className = _a.className, fluid = _a.fluid, fixed = _a.fixed, alignSelf = _a.alignSelf, intent = _a.intent, active = _a.active, flat = _a.flat, rightIcon = _a.rightIcon, customTheme = _a.customTheme, wrap = _a.wrap, readOnly = _a.readOnly, badge = _a.badge, indicator = _a.indicator, description = _a.description, maxWidth = _a.maxWidth, textAlignProp = _a.textAlign, effect = _a.effect, labelEffect = _a.labelEffect, descriptionEffect = _a.descriptionEffect, leftIconColor = _a.leftIconColor, rightIconColor = _a.rightIconColor, iconColor = _a.iconColor, iconsAlignProp = _a.iconsAlign, leftIconProps = _a.leftIconProps, rightIconProps = _a.rightIconProps, label = _a.label, compact = _a.compact, square = _a.square, as = _a.as, animated = _a.animated, loading = _a.loading, shortcut = _a.shortcut, shortcutHint = _a.shortcutHint, loadingIconType = _a.loadingIconType, rest = __rest(_a, ["icon", "size", "minimal", "transparent", "children", "tooltip", "className", "fluid", "fixed", "alignSelf", "intent", "active", "flat", "rightIcon", "customTheme", "wrap", "readOnly", "badge", "indicator", "description", "maxWidth", "textAlign", "effect", "labelEffect", "descriptionEffect", "leftIconColor", "rightIconColor", "iconColor", "iconsAlign", "leftIconProps", "rightIconProps", "label", "compact", "square", "as", "animated", "loading", "shortcut", "shortcutHint", "loadingIconType"]);
+    var animations = (0, useReqoreContext_1.useReqoreProperty)('animations');
+    var shortcutHintsEnabled = (0, useReqoreContext_1.useReqoreProperty)('shortcutHints');
+    var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent);
+    var fixedEffect = (0, useReqoreEffect_1.useReqoreEffect)('buttons', theme, effect);
+    var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
     // Square chips have no horizontal padding, so the content would
     // stick to the left edge if we kept `textAlign`'s usual `'left'`
     // default. Default `textAlign` and `iconsAlign` to `'center'` for
@@ -283,24 +322,24 @@ var ReqoreButton = memo(forwardRef(function (_a, ref) {
     var textAlign = textAlignProp !== null && textAlignProp !== void 0 ? textAlignProp : (square ? 'center' : 'left');
     var iconsAlign = iconsAlignProp !== null && iconsAlignProp !== void 0 ? iconsAlignProp : (square ? 'center' : undefined);
     var shortcutEnabled = !!shortcut && !rest.disabled && !readOnly && !loading;
-    useHotkeys(shortcut !== null && shortcut !== void 0 ? shortcut : [], function (event) {
+    (0, react_hotkeys_hook_1.useHotkeys)(shortcut !== null && shortcut !== void 0 ? shortcut : [], function (event) {
         var _a;
         event.preventDefault();
         (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.click();
     }, {
         enabled: shortcutEnabled,
-        enableOnFormTags: shortcut ? shortcutHasModifier(shortcut) : false,
+        enableOnFormTags: shortcut ? (0, shortcuts_1.shortcutHasModifier)(shortcut) : false,
         preventDefault: true,
     }, [shortcut, shortcutEnabled]);
     var showShortcutHint = !!shortcut && shortcutHint !== false && shortcutHintsEnabled !== false;
     // If color or intent was specified, set the color
-    var customColor = useMemo(function () { return (intent ? theme.main : changeLightness(theme.main, 0.07)); }, [intent, theme.main]);
+    var customColor = (0, react_1.useMemo)(function () { return (intent ? theme.main : (0, colors_2.changeLightness)(theme.main, 0.07)); }, [intent, theme.main]);
     var _flat = minimal ? flat : flat === true;
-    var _children = useMemo(function () { return label || children; }, [label, children]);
+    var _children = (0, react_1.useMemo)(function () { return label || children; }, [label, children]);
     var _compact = (_c = compact !== null && compact !== void 0 ? compact : (_b = theme.buttons) === null || _b === void 0 ? void 0 : _b.compact) !== null && _c !== void 0 ? _c : !children;
     var hasLeftIcon = icon || (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.image);
     var hasRightIcon = rightIcon || (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.image);
-    var hasRightAlignedBadge = useMemo(function () {
+    var hasRightAlignedBadge = (0, react_1.useMemo)(function () {
         if (Array.isArray(badge)) {
             return badge.some(function (badge) {
                 return typeof badge !== 'string' && typeof badge !== 'number' && (badge === null || badge === void 0 ? void 0 : badge.align) === 'right';
@@ -312,14 +351,14 @@ var ReqoreButton = memo(forwardRef(function (_a, ref) {
     var leftIcon = loading
         ? "Loader".concat(loadingIconType || '', "Line")
         : icon || (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.icon);
-    var memoEffect = useMemo(function () { return (__assign(__assign({ interactive: !readOnly && !rest.disabled }, fixedEffect), { gradient: intent ? undefined : fixedEffect === null || fixedEffect === void 0 ? void 0 : fixedEffect.gradient })); }, [fixedEffect, intent, readOnly, rest.disabled]);
-    var indicatorConfig = useMemo(function () {
+    var memoEffect = (0, react_1.useMemo)(function () { return (__assign(__assign({ interactive: !readOnly && !rest.disabled }, fixedEffect), { gradient: intent ? undefined : fixedEffect === null || fixedEffect === void 0 ? void 0 : fixedEffect.gradient })); }, [fixedEffect, intent, readOnly, rest.disabled]);
+    var indicatorConfig = (0, react_1.useMemo)(function () {
         var _a, _b, _c, _d, _e, _f, _g;
         if (!indicator) {
             return undefined;
         }
         var config = indicator === true ? {} : indicator;
-        var diameter = INDICATOR_SIZE_TO_PX[size];
+        var diameter = sizes_1.INDICATOR_SIZE_TO_PX[size];
         return {
             color: (_d = (_a = config.color) !== null && _a !== void 0 ? _a : (_b = theme.intents) === null || _b === void 0 ? void 0 : _b[(_c = config.intent) !== null && _c !== void 0 ? _c : 'danger']) !== null && _d !== void 0 ? _d : (_e = theme.intents) === null || _e === void 0 ? void 0 : _e.danger,
             diameter: diameter,
@@ -328,11 +367,14 @@ var ReqoreButton = memo(forwardRef(function (_a, ref) {
             pulse: (_g = config.pulse) !== null && _g !== void 0 ? _g : false,
         };
     }, [indicator, size, theme.intents]);
-    return (_jsxs(ReqoreTooltipComponent, __assign({}, rest, { effect: memoEffect,
-        tabIndex: rest.disabled ? -1 : 0,
+    return ((0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, rest, { effect: memoEffect,
+        // The caller's tab stop wins — a grid or a diagram keeps one of its
+        // buttons in the tab order and moves it — except that a disabled
+        // button is never one.
+        tabIndex: rest.disabled ? -1 : ((_d = rest.tabIndex) !== null && _d !== void 0 ? _d : 0),
         as: as || 'button', theme: theme, fluid: fluid, fixed: fixed, alignSelf: alignSelf, maxWidth: maxWidth, minimal: minimal, transparent: transparent, size: size, intent: intent, color: customColor, animate: animate, flat: _flat, active: active, readOnly: readOnly || loading, wrap: wrap, description: description, className: "".concat(className || '', " reqore-control reqore-button"),
-        compact: _compact, square: square, tooltip: tooltip }, REQORE_MARQUEE_HOST, { Component: StyledButton, ref: targetRef, children: [_jsxs(StyledButtonContent, { size: size, wrap: wrap, description: description, flat: _flat, children: [hasLeftIcon ? (_jsxs(_Fragment, { children: [_jsx(ReqoreIcon, __assign({ size: size, color: leftIconColor || iconColor, compact: true, effect: {
-                                    opacity: CONTROL_ICON_OPACITY,
+        compact: _compact, square: square, tooltip: tooltip }, useMarqueeOnHover_1.REQORE_MARQUEE_HOST, { Component: exports.StyledButton, ref: targetRef, children: [(0, jsx_runtime_1.jsxs)(exports.StyledButtonContent, { size: size, wrap: wrap, description: description, flat: _flat, children: [hasLeftIcon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ size: size, color: leftIconColor || iconColor, compact: true, effect: {
+                                    opacity: colors_1.CONTROL_ICON_OPACITY,
                                 } }, leftIconProps, { style: textAlign !== 'left' || iconsAlign === 'center' || !_children
                                     ? {
                                         marginRight: iconsAlign !== 'center' || !_children ? 'auto' : undefined,
@@ -342,10 +384,10 @@ var ReqoreButton = memo(forwardRef(function (_a, ref) {
                                             ? 'auto'
                                             : undefined,
                                     }
-                                    : undefined, animation: loading ? 'spin' : leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.animation, icon: leftIcon })), _children || hasRightIcon ? (_jsx(ReqoreSpacer, { width: PADDING_FROM_SIZE[size] / 2 })) : null] })) : _children ? (_jsx(ReqoreHorizontalSpacer, { width: 1, style: textAlign !== 'left' ? { marginRight: 'auto' } : undefined })) : null, _children && (_jsxs(StyledAnimatedTextWrapper, { textAlign: textAlign, style: textAlign === 'center' && iconsAlign !== 'center' ? { margin: 'auto' } : undefined, children: [!animate && (_jsx(StyledContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content' }, REQORE_MARQUEE_TEXT, { children: _children }))), animate && (_jsx(StyledActiveContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-active' }, REQORE_MARQUEE_TEXT, { children: _children }))), animate && (_jsx(StyledInActiveContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-inactive' }, REQORE_MARQUEE_TEXT, { "aria-hidden": 'true', children: _children }))), animate && (_jsx(StyledInvisibleContent, { wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-invisible', "aria-hidden": 'true', children: _children })), (badge || badge === 0) && wrap ? (_jsx(ButtonBadge, { content: badge, size: size, wrap: true, active: active })) : null] })), (badge || badge === 0) && !wrap ? (_jsx(ButtonBadge, { content: badge, size: size, compact: _compact, wrapGroup: false, wrap: false, active: active })) : null, !hasRightIcon ? (_children ? (_jsx(ReqoreHorizontalSpacer, { width: 1, style: textAlign !== 'right' && !hasRightAlignedBadge
+                                    : undefined, animation: loading ? 'spin' : leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.animation, icon: leftIcon })), _children || hasRightIcon ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] / 2 })) : null] })) : _children ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreHorizontalSpacer, { width: 1, style: textAlign !== 'left' ? { marginRight: 'auto' } : undefined })) : null, _children && ((0, jsx_runtime_1.jsxs)(exports.StyledAnimatedTextWrapper, { textAlign: textAlign, style: textAlign === 'center' && iconsAlign !== 'center' ? { margin: 'auto' } : undefined, children: [!animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content' }, useMarqueeOnHover_1.REQORE_MARQUEE_TEXT, { children: _children }))), animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledActiveContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-active' }, useMarqueeOnHover_1.REQORE_MARQUEE_TEXT, { children: _children }))), animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledInActiveContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-inactive' }, useMarqueeOnHover_1.REQORE_MARQUEE_TEXT, { "aria-hidden": 'true', children: _children }))), animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledInvisibleContent, { wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-invisible', "aria-hidden": 'true', children: _children })), (badge || badge === 0) && wrap ? ((0, jsx_runtime_1.jsx)(exports.ButtonBadge, { content: badge, size: size, wrap: true, active: active })) : null] })), (badge || badge === 0) && !wrap ? ((0, jsx_runtime_1.jsx)(exports.ButtonBadge, { content: badge, size: size, compact: _compact, wrapGroup: false, wrap: false, active: active })) : null, !hasRightIcon ? (_children ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreHorizontalSpacer, { width: 1, style: textAlign !== 'right' && !hasRightAlignedBadge
                             ? { marginLeft: 'auto' }
-                            : undefined })) : null) : (_jsxs(_Fragment, { children: [_children || badge ? _jsx(ReqoreSpacer, { width: PADDING_FROM_SIZE[size] / 2 }) : null, _jsx(ReqoreIcon, __assign({ icon: rightIcon, size: size, color: rightIconColor || iconColor, effect: {
-                                    opacity: CONTROL_ICON_OPACITY,
+                            : undefined })) : null) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [_children || badge ? (0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] / 2 }) : null, (0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ icon: rightIcon, size: size, color: rightIconColor || iconColor, effect: {
+                                    opacity: colors_1.CONTROL_ICON_OPACITY,
                                 } }, rightIconProps, { style: textAlign !== 'right' || iconsAlign === 'center'
                                     ? {
                                         marginLeft: !hasRightAlignedBadge && (iconsAlign !== 'center' || !_children)
@@ -355,8 +397,8 @@ var ReqoreButton = memo(forwardRef(function (_a, ref) {
                                             ? 'auto'
                                             : undefined,
                                     }
-                                    : undefined }))] })), showShortcutHint ? (_jsxs(_Fragment, { children: [_jsx(ReqoreSpacer, { width: PADDING_FROM_SIZE[size] / 2 }), _jsx(ReqoreKeyboardShortcut, { shortcut: shortcut, size: size, compact: _compact })] })) : null] }), description && (_jsx(ReqoreTextEffect, { className: 'reqore-button-description', effect: __assign({ textSize: getOneLessSize(size), weight: 'light', textAlign: textAlign }, descriptionEffect), children: description })), indicatorConfig && (_jsx(StyledButtonIndicator, { className: 'reqore-button-indicator', "$color": indicatorConfig.color, "$diameter": indicatorConfig.diameter, "$offset": indicatorConfig.offset, "$position": indicatorConfig.position, "$pulse": indicatorConfig.pulse, "aria-hidden": 'true' }))] })));
+                                    : undefined }))] })), showShortcutHint ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] / 2 }), (0, jsx_runtime_1.jsx)(KeyboardShortcut_1.ReqoreKeyboardShortcut, { shortcut: shortcut, size: size, compact: _compact })] })) : null] }), description && ((0, jsx_runtime_1.jsx)(Effect_1.ReqoreTextEffect, { className: 'reqore-button-description', effect: __assign({ textSize: (0, utils_1.getOneLessSize)(size), weight: 'light', textAlign: textAlign }, descriptionEffect), children: description })), indicatorConfig && ((0, jsx_runtime_1.jsx)(exports.StyledButtonIndicator, { className: 'reqore-button-indicator', "$color": indicatorConfig.color, "$diameter": indicatorConfig.diameter, "$offset": indicatorConfig.offset, "$position": indicatorConfig.position, "$pulse": indicatorConfig.pulse, "aria-hidden": 'true' }))] })));
 }));
-export default ReqoreButton;
+exports.default = ReqoreButton;
 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=index.js.map