@skbkontur/react-ui 5.6.1-85c65.0 → 5.6.1-e2bc4.0

package/components/Button/ArrowLeftIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowLeftIcon.js","sourceRoot":"","sources":["../../../components/Button/ArrowLeftIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,kEAAkE,CAAC;AACzG,OAAO,EAAE,qBAAqB,EAAE,MAAM,kEAAkE,CAAC;AACzG,OAAO,EAAE,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7G,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAElE,MAAM,CAAC,IAAM,aAAa,GAAG,SAAS,CACpC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,qBAAqB,OAAG,EAAzB,CAAyB;IACtC,MAAM,EAAE,cAAM,OAAA,oBAAC,qBAAqB,OAAG,EAAzB,CAAyB;IACvC,KAAK,EAAE,cAAM,OAAA,oBAAC,uBAAuB,OAAG,EAA3B,CAA2B;CACzC,EACD,eAAe,CAChB,CAAC","sourcesContent":["import React from 'react';\n\nimport { ArrowALeftIcon16Light } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light.js';\nimport { ArrowALeftIcon20Light } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light.js';\nimport { ArrowALeftIcon24Regular } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular.js';\nimport { iconSizer } from '../../internal/icons2022/iconSizer.js';\n\nexport const ArrowLeftIcon = iconSizer(\n  {\n    small: () => <ArrowALeftIcon16Light />,\n    medium: () => <ArrowALeftIcon20Light />,\n    large: () => <ArrowALeftIcon24Regular />,\n  },\n  'ArrowLeftIcon',\n);\n"]}

package/components/Button/ArrowRightIcon.d.ts

@@ -1,3 +1,3 @@
-export declare const ArrowRightIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
-    size?: import("../../internal/icons2022/BaseIcon").IconProps["size"] | import("../../internal/icons2022/iconConstants").IconSizeAliases;
+export declare const ArrowRightIcon: import("../../lib/forwardRefAndName.js").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon.js").IconProps, "size"> & {
+    size?: import("../../internal/icons2022/BaseIcon.js").IconProps["size"] | import("../../internal/icons2022/iconConstants.js").IconSizeAliases;
 }>;

package/components/Button/ArrowRightIcon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ArrowARightIcon16Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light.js';
+import { ArrowARightIcon20Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light.js';
+import { ArrowARightIcon24Regular } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular.js';
+import { iconSizer } from '../../internal/icons2022/iconSizer.js';
+export var ArrowRightIcon = iconSizer({
+    small: function () { return React.createElement(ArrowARightIcon16Light, null); },
+    medium: function () { return React.createElement(ArrowARightIcon20Light, null); },
+    large: function () { return React.createElement(ArrowARightIcon24Regular, null); },
+}, 'ArrowRightIcon');
+//# sourceMappingURL=ArrowRightIcon.js.map

package/components/Button/ArrowRightIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowRightIcon.js","sourceRoot":"","sources":["../../../components/Button/ArrowRightIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,oEAAoE,CAAC;AAC5G,OAAO,EAAE,sBAAsB,EAAE,MAAM,oEAAoE,CAAC;AAC5G,OAAO,EAAE,wBAAwB,EAAE,MAAM,sEAAsE,CAAC;AAChH,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAElE,MAAM,CAAC,IAAM,cAAc,GAAG,SAAS,CACrC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,sBAAsB,OAAG,EAA1B,CAA0B;IACvC,MAAM,EAAE,cAAM,OAAA,oBAAC,sBAAsB,OAAG,EAA1B,CAA0B;IACxC,KAAK,EAAE,cAAM,OAAA,oBAAC,wBAAwB,OAAG,EAA5B,CAA4B;CAC1C,EACD,gBAAgB,CACjB,CAAC","sourcesContent":["import React from 'react';\n\nimport { ArrowARightIcon16Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light.js';\nimport { ArrowARightIcon20Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light.js';\nimport { ArrowARightIcon24Regular } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular.js';\nimport { iconSizer } from '../../internal/icons2022/iconSizer.js';\n\nexport const ArrowRightIcon = iconSizer(\n  {\n    small: () => <ArrowARightIcon16Light />,\n    medium: () => <ArrowARightIcon20Light />,\n    large: () => <ArrowARightIcon24Regular />,\n  },\n  'ArrowRightIcon',\n);\n"]}

package/components/Button/Button.d.ts

@@ -1,11 +1,11 @@
 import type { JSX } from 'react';
 import React from 'react';
-import type { ButtonLinkAllowedValues } from '../../lib/types/button-link';
-import type { ThemeIn } from '../../lib/theming/Theme';
-import type { CommonProps } from '../../internal/CommonWrapper';
-import type { TGetRootNode } from '../../lib/rootNode';
-import type { SizeProp } from '../../lib/types/props';
-import type { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component';
+import type { ButtonLinkAllowedValues } from '../../lib/types/button-link.js';
+import type { ThemeIn } from '../../lib/theming/Theme.js';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { SizeProp } from '../../lib/types/props.js';
+import type { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component.js';
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';
 export interface ButtonInnerProps extends CommonProps {

package/components/Button/Button.js

@@ -0,0 +1,335 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import warning from 'warning';
+import { isKonturIcon } from '../../lib/utils.js';
+import { isSafari } from '../../lib/client.js';
+import { KeyListener } from '../../lib/events/keyListener.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { Link } from '../Link/index.js';
+import { withSize } from '../../lib/size/SizeDecorator.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles, getActiveStyles, globalClasses } from './Button.styles.js';
+import { ButtonIcon, getButtonIconSizes } from './ButtonIcon.js';
+import { useButtonArrow } from './ButtonArrow.js';
+import { getInnerLinkTheme } from './getInnerLinkTheme.js';
+import { LoadingButtonIcon } from './LoadingButtonIcon.js';
+export var BUTTON_DEFAULT_COMPONENT = 'button';
+export var ButtonDataTids = {
+    rootElement: 'Button__rootElement',
+    root: 'Button__root',
+    spinner: 'Button__spinner',
+};
+var SpanComponent = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return React.createElement("span", __assign({}, rest), children);
+};
+/** Кнопка запускает действие, сценарий или позволяет перейти на другую страницу. */
+var Button = /** @class */ (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getProps = createPropsGetter(Button_1.defaultProps);
+        _this.state = {
+            focusedByTab: false,
+        };
+        _this.node = null;
+        _this.renderMain = function (props) {
+            var _a, _b, _c, _d, _e;
+            var corners = props.corners, active = props.active, disabled = props.disabled, borderless = props.borderless, checked = props.checked, error = props.error, warning = props.warning, loading = props.loading, narrow = props.narrow, arrow = props.arrow, icon = props.icon, rightIcon = props.rightIcon, _noPadding = props._noPadding, _noRightPadding = props._noRightPadding, visuallyFocused = props.visuallyFocused, align = props.align, disableFocus = props.disableFocus, width = props.width, tabIndex = props.tabIndex, _component = props.component, useProp = props.use, theme = props.theme, rest = __rest(props, ["corners", "active", "disabled", "borderless", "checked", "error", "warning", "loading", "narrow", "arrow", "icon", "rightIcon", "_noPadding", "_noRightPadding", "visuallyFocused", "align", "disableFocus", "width", "tabIndex", "component", "use", "theme"]);
+            var _f = _this.getProps(), use = _f.use, component = _f.component, children = _f.children;
+            var sizeClass = _this.getSizeClassName();
+            var isFocused = _this.state.focusedByTab || visuallyFocused;
+            var isLink = use === 'link';
+            var _g = useButtonArrow(__assign(__assign({}, _this.props), { isFocused: Boolean(isFocused), size: _this.size }), _this.theme, _this.styles, _this.cx), rootClassNameWithArrow = _g[0], arrowNode = _g[1];
+            var isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);
+            var nonInteractive = disabled || loading;
+            var rootClassName = _this.cx.apply(_this, __spreadArray([_this.styles.root(_this.theme),
+                _this.styles[use](_this.theme),
+                sizeClass,
+                narrow && _this.styles.narrow(),
+                _noPadding && _this.styles.noPadding(),
+                _noRightPadding && _this.styles.noRightPadding(),
+                rootClassNameWithArrow], (nonInteractive
+                ? [
+                    _this.styles.disabled(_this.theme),
+                    isUseStateWithoutOutlineInDisabledState && _this.styles.disabledWithoutOutline(_this.theme),
+                    checked && _this.styles.checkedDisabled(_this.theme),
+                    borderless && _this.styles.borderless(),
+                    use === 'backless' && _this.styles.backlessDisabled(_this.theme),
+                    use === 'text' && _this.styles.textDisabled(),
+                    globalClasses.disabled,
+                ]
+                : [
+                    active && !checked && _this.activeStyles[use](_this.theme),
+                    isFocused && _this.styles.focus(_this.theme),
+                    checked && _this.styles.checked(_this.theme),
+                    checked && isFocused && _this.styles.checkedFocused(_this.theme),
+                    borderless && !checked && !isFocused && _this.styles.borderless(),
+                ]), false));
+            var rootProps = __assign(__assign({}, rest), { className: rootClassName, style: __assign({ textAlign: align }, corners), onFocus: _this.handleFocus, onBlur: _this.handleBlur, tabIndex: _this.getTabIndex({ disableFocus: disableFocus, disabled: nonInteractive, tabIndex: tabIndex }) });
+            var wrapProps = {
+                className: _this.cx(globalClasses.root, (_a = {},
+                    _a[_this.styles.wrap(_this.theme)] = true,
+                    _a[_this.getSizeWrapClassName()] = true,
+                    _a)),
+                style: {
+                    width: width,
+                },
+            };
+            var buttonOnlyProps = component === 'button' ? { disabled: nonInteractive } : {};
+            var innerShadowNode = null;
+            var outlineNode = null;
+            if ((!isFocused || isLink) && !nonInteractive) {
+                outlineNode = (React.createElement("div", { className: _this.cx(_this.styles.outline(), (_b = {},
+                        _b[_this.styles.outlineWarning(_this.theme)] = warning,
+                        _b[_this.styles.outlineError(_this.theme)] = error,
+                        _b[_this.styles.outlineLink()] = isLink,
+                        _b[_this.styles.outlineLinkWarning(_this.theme)] = isLink && warning,
+                        _b[_this.styles.outlineLinkError(_this.theme)] = isLink && error,
+                        _b)) }));
+            }
+            var iconProps = {
+                use: use,
+                size: _this.size,
+                hasChildren: !!children,
+                loading: loading || false,
+            };
+            var leftIconNode = icon && React.createElement(ButtonIcon, __assign({}, iconProps, { position: "left", icon: icon }));
+            var rightIconNode = rightIcon && (React.createElement(ButtonIcon, __assign({}, iconProps, { hasBothIcons: !!icon && !!rightIcon, position: "right", icon: rightIcon })));
+            // Force disable all props and features, that cannot be use with Link
+            if (isLink) {
+                rootProps.className = _this.cx((_c = {},
+                    _c[_this.styles.root(_this.theme)] = true,
+                    _c[sizeClass] = true,
+                    _c[_this.styles.link(_this.theme)] = true,
+                    _c[_this.styles.linkLineHeight()] = !isSafari,
+                    _c[_this.styles.linkLineHeightSafariFallback()] = isSafari,
+                    _c[_this.styles.linkFocus(_this.theme)] = isFocused,
+                    _c[_this.styles.linkDisabled(_this.theme)] = nonInteractive,
+                    _c));
+                Object.assign(wrapProps, {
+                    className: _this.cx(_this.styles.wrap(_this.theme), _this.styles.wrapLink()),
+                    style: { width: wrapProps.style.width },
+                });
+                rootProps.style.textAlign = undefined;
+            }
+            var hasLoadingNode = loading && !icon && !rightIcon;
+            var loadingNode = hasLoadingNode && React.createElement(LoadingButtonIcon, { size: _this.size });
+            var captionNode = (React.createElement("div", { className: _this.cx(_this.styles.caption(), globalClasses.caption, (_d = {},
+                    _d[_this.styles.captionLink()] = isLink,
+                    _d[_this.styles.captionDisabled()] = !checked && disabled,
+                    _d)) },
+                loadingNode,
+                leftIconNode,
+                React.createElement("span", { className: _this.cx(globalClasses.text, (_e = {},
+                        _e[_this.styles.visibilityHidden()] = hasLoadingNode,
+                        _e)) }, children),
+                rightIconNode));
+            if (isLink && !loading) {
+                captionNode = (React.createElement(ThemeContext.Provider, { value: getInnerLinkTheme(_this.theme) }, React.createElement(Link, { focused: isFocused, disabled: disabled, icon: _this.renderIcon2022(icon), rightIcon: _this.renderIcon2022(rightIcon), tabIndex: -1, component: SpanComponent }, children)));
+            }
+            var Root = component;
+            return (React.createElement("span", __assign({}, wrapProps, { "data-tid": ButtonDataTids.root }),
+                React.createElement(Root, __assign({ "data-tid": ButtonDataTids.rootElement, ref: _this._ref }, rootProps, buttonOnlyProps),
+                    innerShadowNode,
+                    outlineNode,
+                    arrowNode,
+                    captionNode)));
+        };
+        _this.handleFocus = function (e) {
+            var _a, _b, _c, _d;
+            if (!_this.props.disabled && !_this.props.disableFocus) {
+                // focus event fires before keyDown eventlistener
+                // so we should check tabPressed in async way
+                (_b = (_a = _this.globalObject).requestAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(_a, function () {
+                    if (_this.keyListener.isTabPressed) {
+                        _this.setState({ focusedByTab: true });
+                    }
+                });
+                (_d = (_c = _this.props).onFocus) === null || _d === void 0 ? void 0 : _d.call(_c, e);
+            }
+        };
+        _this.handleBlur = function (e) {
+            var _a, _b;
+            _this.setState({ focusedByTab: false });
+            if (!_this.props.disabled && !_this.props.disableFocus) {
+                (_b = (_a = _this.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            }
+        };
+        _this._ref = function (node) {
+            _this.node = node;
+        };
+        return _this;
+    }
+    Button_1 = Button;
+    Button.prototype.componentDidMount = function () {
+        this.keyListener = new KeyListener(this.globalObject);
+        if (this.props.autoFocus) {
+            this.keyListener.isTabPressed = true;
+            this.focus();
+        }
+        warning(this.props.use !== 'link', '[Button]: `use="link"` has been deprecated. Please, use `<Link component="button" />` instead.');
+    };
+    Button.getDerivedStateFromProps = function (props) {
+        if (props.loading || props.disabled) {
+            return { focusedByTab: false };
+        }
+        return null;
+    };
+    /** Программно устанавливает фокус на кнопке. Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
+     * @public
+     */
+    Button.prototype.focus = function () {
+        var _a;
+        (_a = this.node) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    /** Программно снимает фокус с кнопки.
+     * @public
+     */
+    Button.prototype.blur = function () {
+        var _a;
+        (_a = this.node) === null || _a === void 0 ? void 0 : _a.blur();
+    };
+    Button.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        this.activeStyles = getActiveStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = _this.props.theme ? ThemeFactory.create(_this.props.theme, theme) : theme;
+            return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.props), _this.renderMain));
+        }));
+    };
+    Button.prototype.getTabIndex = function (_a) {
+        var disableFocus = _a.disableFocus, disabled = _a.disabled, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b;
+        if (disableFocus || disabled) {
+            return -1;
+        }
+        return tabIndex;
+    };
+    Button.prototype.renderIcon2022 = function (icon) {
+        var _a;
+        if ((icon === null || icon === void 0 ? void 0 : icon.props) && isKonturIcon(icon)) {
+            var iconProps = icon.props;
+            var sizes = getButtonIconSizes(this.theme);
+            return React.cloneElement(icon, { size: (_a = iconProps.size) !== null && _a !== void 0 ? _a : sizes[this.size] });
+        }
+        return icon;
+    };
+    Button.prototype.getSizeClassName = function () {
+        var _a, _b, _c;
+        var _d = this.getProps(), icon = _d.icon, rightIcon = _d.rightIcon, children = _d.children;
+        switch (this.size) {
+            case 'large': {
+                var commonClasses = (_a = {},
+                    _a[this.styles.sizeLargeWithIcon(this.theme)] = !!icon,
+                    _a[this.styles.sizeLargeWithRightIcon(this.theme)] = !!rightIcon,
+                    _a[this.styles.sizeLargeWithIconWithoutText(this.theme)] = (!!icon || !!rightIcon) && !children,
+                    _a);
+                return this.cx(this.styles.sizeLarge(this.theme), commonClasses);
+            }
+            case 'medium': {
+                var commonClasses = (_b = {},
+                    _b[this.styles.sizeMediumWithIcon(this.theme)] = !!icon,
+                    _b[this.styles.sizeMediumWithRightIcon(this.theme)] = !!rightIcon,
+                    _b[this.styles.sizeMediumWithIconWithoutText(this.theme)] = (!!icon || !!rightIcon) && !children,
+                    _b);
+                return this.cx(this.styles.sizeMedium(this.theme), commonClasses);
+            }
+            case 'small':
+            default: {
+                var commonClasses = (_c = {},
+                    _c[this.styles.sizeSmallWithIcon(this.theme)] = !!icon,
+                    _c[this.styles.sizeSmallWithRightIcon(this.theme)] = !!rightIcon,
+                    _c[this.styles.sizeSmallWithIconWithoutText(this.theme)] = (!!icon || !!rightIcon) && !children,
+                    _c);
+                return this.cx(this.styles.sizeSmall(this.theme), commonClasses);
+            }
+        }
+    };
+    Button.prototype.getSizeWrapClassName = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.wrapLarge(this.theme);
+            case 'medium':
+                return this.styles.wrapMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.wrapSmall(this.theme);
+        }
+    };
+    var Button_1;
+    Button.__KONTUR_REACT_UI__ = 'Button';
+    Button.displayName = 'Button';
+    Button.__BUTTON__ = true;
+    Button.defaultProps = {
+        use: 'default',
+        // By default, the type attribute is 'submit'. IE8 will fire a click event
+        // on this button if somewhere on the page user presses Enter while some
+        // input is focused. So we set type to 'button' by default.
+        type: 'button',
+        component: BUTTON_DEFAULT_COMPONENT,
+    };
+    Button = Button_1 = __decorate([
+        withRenderEnvironment,
+        withSize,
+        rootNode
+    ], Button);
+    return Button;
+}(React.Component));
+export { Button };
+//# sourceMappingURL=Button.js.map

package/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { HTMLAttributes, JSX } from 'react';\nimport React from 'react';\nimport warning from 'warning';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport type { ButtonLinkAllowedValues } from '../../lib/types/button-link.js';\nimport { isKonturIcon } from '../../lib/utils.js';\nimport { isSafari } from '../../lib/client.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { Link } from '../Link/index.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { IconProps } from '../../internal/icons2022/BaseIcon.js';\n\nimport { getStyles, getActiveStyles, globalClasses } from './Button.styles.js';\nimport type { ButtonIconProps } from './ButtonIcon.js';\nimport { ButtonIcon, getButtonIconSizes } from './ButtonIcon.js';\nimport { useButtonArrow } from './ButtonArrow.js';\nimport { getInnerLinkTheme } from './getInnerLinkTheme.js';\nimport { LoadingButtonIcon } from './LoadingButtonIcon.js';\n\nexport type ButtonType = 'button' | 'submit' | 'reset';\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';\n\nexport interface ButtonInnerProps extends CommonProps {\n  /** @ignore */\n  _noPadding?: boolean;\n\n  /** @ignore */\n  _noRightPadding?: boolean;\n\n  /** Применяет к кнопке стили псевдокласса `:active`. */\n  active?: boolean;\n\n  /** Задаёт выравнивание текста в кнопке. */\n  align?: React.CSSProperties['textAlign'];\n\n  /** Преобразует обычную кнопку в кнопку со стрелкой. */\n  arrow?: boolean | 'left';\n\n  /** Устанавливает фокус на кнопке после окончания загрузки страницы.*/\n  autoFocus?: boolean;\n\n  /** Убирает обводку у кнопки.\n   *\n   * **Не рекомендуем использовать, противоречит дизайн-требованиям.\n   * @deprecated Состояние не соответствует Контур.Гайдам, проп будет удален в следующей мажорной версии, 7.0.\n   *\n   * Альтернативный вариант использования — через переменную темы `btnBorderWidth` */\n  borderless?: boolean;\n\n  /** @ignore */\n  checked?: boolean;\n\n  /** @ignore */\n  children?: React.ReactNode;\n\n  /** @ignore */\n  corners?: React.CSSProperties;\n\n  /** Блокирует кнопку и перекрашивает в серый. */\n  disabled?: boolean;\n\n  /** @ignore */\n  disableFocus?: boolean;\n\n  /** Переводит кнопку в состояние валидации \"Ошибка\".\n   *\n   * @deprecated Состояние не соответствует Контур.Гайдам, проп будет удален в следующей мажорной версии, 7.0. */\n  error?: boolean;\n\n  /** Добавляет иконку слева от текста кнопки. */\n  icon?: React.ReactElement;\n\n  /** Добавляет иконку справа от текста кнопки. */\n  rightIcon?: React.ReactElement;\n\n  /** Переводит кнопку в состояние загрузки. */\n  loading?: boolean;\n\n  /** Сужает кнопку.\n   *\n   * @deprecated Состояние не соответствует Контур.Гайдам, проп будет удален в следующей мажорной версии, 7.0.\n   *\n   * Альтернативный вариант использования — через переменные темы `btnPaddingXSmall`, `btnPaddingXMedium`, `btnPaddingXLarge` */\n  narrow?: boolean;\n\n  /** Задаёт размер кнопки. */\n  size?: SizeProp;\n\n  /** Задаёт HTML-атрибут `type`. */\n  type?: ButtonType;\n\n  /** Задаёт HTML-атрибут `title`. */\n  title?: string;\n\n  /** Задаёт стиль кнопки.\n   * **Вариант `link` устарел.** Если нужна кнопка, выглядящая как ссылка, используйте `Link component=button`.\n   */\n  use?: ButtonUse;\n\n  /** @ignore */\n  visuallyFocused?: boolean;\n\n  /** Переводит кнопку в состояние валидации \"Предупреждение\".\n   * @deprecated Состояние не соответствует Контур.Гайдам, проп будет удален в следующей мажорной версии, 7.0. */\n  warning?: boolean;\n\n  /** Задаёт ширину кнопки. */\n  width?: number | string;\n\n  /** Задаёт объект с переменными темы. */\n  theme?: ThemeIn;\n}\n\nexport const BUTTON_DEFAULT_COMPONENT = 'button';\n\nexport type ButtonProps<C extends ButtonLinkAllowedValues = typeof BUTTON_DEFAULT_COMPONENT> =\n  PolymorphicPropsWithoutRef<ButtonInnerProps, C>;\n\nexport interface ButtonState {\n  focusedByTab: boolean;\n}\n\nexport const ButtonDataTids = {\n  rootElement: 'Button__rootElement',\n  root: 'Button__root',\n  spinner: 'Button__spinner',\n} as const;\n\ntype DefaultProps = Required<Pick<ButtonProps<ButtonLinkAllowedValues>, 'use' | 'type' | 'component'>>;\n\nconst SpanComponent: React.FunctionComponent<HTMLAttributes<HTMLSpanElement>> = ({ children, ...rest }) => {\n  return <span {...rest}>{children}</span>;\n};\n\n/** Кнопка запускает действие, сценарий или позволяет перейти на другую страницу. */\n@withRenderEnvironment\n@withSize\n@rootNode\nexport class Button<C extends ButtonLinkAllowedValues = typeof BUTTON_DEFAULT_COMPONENT> extends React.Component<\n  ButtonProps<C>,\n  ButtonState\n> {\n  public static __KONTUR_REACT_UI__ = 'Button';\n  public static displayName = 'Button';\n  public static __BUTTON__ = true;\n\n  public static defaultProps: DefaultProps = {\n    use: 'default',\n    // By default, the type attribute is 'submit'. IE8 will fire a click event\n    // on this button if somewhere on the page user presses Enter while some\n    // input is focused. So we set type to 'button' by default.\n    type: 'button',\n    component: BUTTON_DEFAULT_COMPONENT,\n  };\n\n  private getProps = createPropsGetter(Button.defaultProps);\n\n  public state = {\n    focusedByTab: false,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private activeStyles!: ReturnType<typeof getActiveStyles>;\n  private theme!: Theme;\n  private node: HTMLElement | null = null;\n  private size!: SizeProp;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private keyListener!: KeyListener;\n\n  public componentDidMount() {\n    this.keyListener = new KeyListener(this.globalObject);\n    if (this.props.autoFocus) {\n      this.keyListener.isTabPressed = true;\n      this.focus();\n    }\n    warning(\n      this.props.use !== 'link',\n      '[Button]: `use=\"link\"` has been deprecated. Please, use `<Link component=\"button\" />` instead.',\n    );\n  }\n\n  public static getDerivedStateFromProps(props: ButtonProps) {\n    if (props.loading || props.disabled) {\n      return { focusedByTab: false };\n    }\n    return null;\n  }\n\n  /** Программно устанавливает фокус на кнопке. Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.\n   * @public\n   */\n  public focus(): void {\n    this.node?.focus();\n  }\n\n  /** Программно снимает фокус с кнопки.\n   * @public\n   */\n  public blur(): void {\n    this.node?.blur();\n  }\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n    this.activeStyles = getActiveStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private getTabIndex({\n    disableFocus,\n    disabled,\n    tabIndex = 0,\n  }: Pick<ButtonProps, 'disableFocus' | 'disabled' | 'tabIndex'>) {\n    if (disableFocus || disabled) {\n      return -1;\n    }\n\n    return tabIndex;\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<ButtonProps>) => {\n    const {\n      corners,\n      active,\n      disabled,\n      borderless,\n      checked,\n      error,\n      warning,\n      loading,\n      narrow,\n      arrow,\n      icon,\n      rightIcon,\n      _noPadding,\n      _noRightPadding,\n      visuallyFocused,\n      align,\n      disableFocus,\n      width,\n      tabIndex,\n      component: _component,\n      use: useProp,\n      theme,\n      ...rest\n    } = props;\n    const { use, component, children } = this.getProps();\n\n    const sizeClass = this.getSizeClassName();\n\n    const isFocused = this.state.focusedByTab || visuallyFocused;\n    const isLink = use === 'link';\n\n    const [rootClassNameWithArrow, arrowNode] = useButtonArrow(\n      { ...this.props, isFocused: Boolean(isFocused), size: this.size },\n      this.theme,\n      this.styles,\n      this.cx,\n    );\n    const isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);\n\n    const nonInteractive = disabled || loading;\n    const rootClassName = this.cx(\n      this.styles.root(this.theme),\n      this.styles[use](this.theme),\n      sizeClass,\n      narrow && this.styles.narrow(),\n      _noPadding && this.styles.noPadding(),\n      _noRightPadding && this.styles.noRightPadding(),\n      rootClassNameWithArrow,\n      ...(nonInteractive\n        ? [\n            this.styles.disabled(this.theme),\n            isUseStateWithoutOutlineInDisabledState && this.styles.disabledWithoutOutline(this.theme),\n            checked && this.styles.checkedDisabled(this.theme),\n            borderless && this.styles.borderless(),\n            use === 'backless' && this.styles.backlessDisabled(this.theme),\n            use === 'text' && this.styles.textDisabled(),\n            globalClasses.disabled,\n          ]\n        : [\n            active && !checked && this.activeStyles[use](this.theme),\n            isFocused && this.styles.focus(this.theme),\n            checked && this.styles.checked(this.theme),\n            checked && isFocused && this.styles.checkedFocused(this.theme),\n            borderless && !checked && !isFocused && this.styles.borderless(),\n          ]),\n    );\n\n    const rootProps = {\n      ...rest,\n      className: rootClassName,\n      style: {\n        textAlign: align,\n        ...corners,\n      },\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      tabIndex: this.getTabIndex({ disableFocus, disabled: nonInteractive, tabIndex }),\n    };\n\n    const wrapProps = {\n      className: this.cx(globalClasses.root, {\n        [this.styles.wrap(this.theme)]: true,\n        [this.getSizeWrapClassName()]: true,\n      }),\n      style: {\n        width,\n      },\n    };\n\n    const buttonOnlyProps = component === 'button' ? { disabled: nonInteractive } : {};\n\n    const innerShadowNode = null;\n\n    let outlineNode = null;\n    if ((!isFocused || isLink) && !nonInteractive) {\n      outlineNode = (\n        <div\n          className={this.cx(this.styles.outline(), {\n            [this.styles.outlineWarning(this.theme)]: warning,\n            [this.styles.outlineError(this.theme)]: error,\n            [this.styles.outlineLink()]: isLink,\n            [this.styles.outlineLinkWarning(this.theme)]: isLink && warning,\n            [this.styles.outlineLinkError(this.theme)]: isLink && error,\n          })}\n        />\n      );\n    }\n\n    const iconProps: Omit<ButtonIconProps, 'position'> = {\n      use,\n      size: this.size,\n      hasChildren: !!children,\n      loading: loading || false,\n    };\n    const leftIconNode = icon && <ButtonIcon {...iconProps} position=\"left\" icon={icon} />;\n    const rightIconNode = rightIcon && (\n      <ButtonIcon {...iconProps} hasBothIcons={!!icon && !!rightIcon} position=\"right\" icon={rightIcon} />\n    );\n\n    // Force disable all props and features, that cannot be use with Link\n    if (isLink) {\n      rootProps.className = this.cx({\n        [this.styles.root(this.theme)]: true,\n        [sizeClass]: true,\n        [this.styles.link(this.theme)]: true,\n        [this.styles.linkLineHeight()]: !isSafari,\n        [this.styles.linkLineHeightSafariFallback()]: isSafari,\n        [this.styles.linkFocus(this.theme)]: isFocused,\n        [this.styles.linkDisabled(this.theme)]: nonInteractive,\n      });\n      Object.assign(wrapProps, {\n        className: this.cx(this.styles.wrap(this.theme), this.styles.wrapLink()),\n        style: { width: wrapProps.style.width },\n      });\n\n      rootProps.style.textAlign = undefined;\n    }\n\n    const hasLoadingNode = loading && !icon && !rightIcon;\n    const loadingNode = hasLoadingNode && <LoadingButtonIcon size={this.size} />;\n\n    let captionNode = (\n      <div\n        className={this.cx(this.styles.caption(), globalClasses.caption, {\n          [this.styles.captionLink()]: isLink,\n          [this.styles.captionDisabled()]: !checked && disabled,\n        })}\n      >\n        {loadingNode}\n        {leftIconNode}\n        <span\n          className={this.cx(globalClasses.text, {\n            [this.styles.visibilityHidden()]: hasLoadingNode,\n          })}\n        >\n          {children}\n        </span>\n        {rightIconNode}\n      </div>\n    );\n    if (isLink && !loading) {\n      captionNode = (\n        <ThemeContext.Provider value={getInnerLinkTheme(this.theme)}>\n          {\n            <Link<typeof SpanComponent>\n              focused={isFocused}\n              disabled={disabled}\n              icon={this.renderIcon2022(icon)}\n              rightIcon={this.renderIcon2022(rightIcon)}\n              tabIndex={-1}\n              component={SpanComponent}\n            >\n              {children}\n            </Link>\n          }\n        </ThemeContext.Provider>\n      );\n    }\n\n    const Root: React.ElementType = component;\n\n    return (\n      <span {...wrapProps} data-tid={ButtonDataTids.root}>\n        <Root data-tid={ButtonDataTids.rootElement} ref={this._ref} {...rootProps} {...buttonOnlyProps}>\n          {innerShadowNode}\n          {outlineNode}\n          {arrowNode}\n          {captionNode}\n        </Root>\n      </span>\n    );\n  };\n\n  private renderIcon2022(icon: React.ReactElement | undefined) {\n    if (icon?.props && isKonturIcon(icon)) {\n      const iconProps = icon.props as IconProps;\n      const sizes = getButtonIconSizes(this.theme);\n      return React.cloneElement(icon, { size: iconProps.size ?? sizes[this.size] } as IconProps);\n    }\n\n    return icon;\n  }\n\n  private getSizeClassName() {\n    const { icon, rightIcon, children } = this.getProps();\n\n    switch (this.size) {\n      case 'large': {\n        const commonClasses = {\n          [this.styles.sizeLargeWithIcon(this.theme)]: !!icon,\n          [this.styles.sizeLargeWithRightIcon(this.theme)]: !!rightIcon,\n          [this.styles.sizeLargeWithIconWithoutText(this.theme)]: (!!icon || !!rightIcon) && !children,\n        };\n\n        return this.cx(this.styles.sizeLarge(this.theme), commonClasses);\n      }\n      case 'medium': {\n        const commonClasses = {\n          [this.styles.sizeMediumWithIcon(this.theme)]: !!icon,\n          [this.styles.sizeMediumWithRightIcon(this.theme)]: !!rightIcon,\n          [this.styles.sizeMediumWithIconWithoutText(this.theme)]: (!!icon || !!rightIcon) && !children,\n        };\n\n        return this.cx(this.styles.sizeMedium(this.theme), commonClasses);\n      }\n      case 'small':\n      default: {\n        const commonClasses = {\n          [this.styles.sizeSmallWithIcon(this.theme)]: !!icon,\n          [this.styles.sizeSmallWithRightIcon(this.theme)]: !!rightIcon,\n          [this.styles.sizeSmallWithIconWithoutText(this.theme)]: (!!icon || !!rightIcon) && !children,\n        };\n\n        return this.cx(this.styles.sizeSmall(this.theme), commonClasses);\n      }\n    }\n  }\n\n  private getSizeWrapClassName() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.wrapLarge(this.theme);\n      case 'medium':\n        return this.styles.wrapMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.wrapSmall(this.theme);\n    }\n  }\n\n  private handleFocus = (e: React.FocusEvent) => {\n    if (!this.props.disabled && !this.props.disableFocus) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      this.globalObject.requestAnimationFrame?.(() => {\n        if (this.keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n      this.props.onFocus?.(e);\n    }\n  };\n\n  private handleBlur = (e: React.FocusEvent) => {\n    this.setState({ focusedByTab: false });\n    if (!this.props.disabled && !this.props.disableFocus) {\n      this.props.onBlur?.(e);\n    }\n  };\n\n  private _ref = (node: HTMLElement | null) => {\n    this.node = node;\n  };\n}\n"]}

package/components/Button/Button.mixins.js

@@ -0,0 +1,19 @@
+import { globalClasses } from './Button.styles.js';
+var getBtnPadding = function (paddingY, paddingX) {
+    return "".concat(paddingY, " ").concat(paddingX, " ").concat(paddingY);
+};
+export var buttonUseMixin = function (btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderWidth) {
+    var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+    return "\n    background-color: ".concat(hasGradient ? "initial" : btnBackground, ";\n    background-image: ").concat(hasGradient ? "linear-gradient(".concat(btnBackgroundStart, ", ").concat(btnBackgroundEnd, ")") : "none", ";\n    color: ").concat(color, ";\n    box-shadow: 0 0 0 ").concat(borderWidth, " ").concat(borderColor, ";\n\n    :enabled:hover,\n    :enabled {\n      .").concat(globalClasses.arrow, " svg {\n        color: ").concat(color, ";\n      }\n    }\n  ");
+};
+export var buttonHoverMixin = function (btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderWidth) {
+    var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+    return "\n    background-color: ".concat(hasGradient ? "initial" : btnBackground, ";\n    background-image: ").concat(hasGradient ? "linear-gradient(".concat(btnBackgroundStart, ", ").concat(btnBackgroundEnd, ")") : "none", ";\n    box-shadow: 0 0 0 ").concat(borderWidth, " ").concat(borderColor, ";\n    color: ").concat(color, ";\n  ");
+};
+export var buttonActiveMixin = function (btnBackground, btnShadow, borderColor, borderWidth) {
+    return "\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ".concat(btnBackground, " !important; // override :hover styles\n      box-shadow: 0 0 0 ").concat(borderWidth, " ").concat(borderColor, " !important; // override :hover styles\n\n      .").concat(globalClasses.innerShadow, " {\n        box-shadow: ").concat(btnShadow, ";\n      }\n    }\n  ");
+};
+export var buttonSizeMixin = function (fontSize, lineHeight, paddingX, paddingY) {
+    return "\n    font-size: ".concat(fontSize, ";\n    box-sizing: border-box;\n    padding: ").concat(getBtnPadding(paddingY, paddingX), ";\n    line-height: ").concat(lineHeight, ";\n  ");
+};
+//# sourceMappingURL=Button.mixins.js.map

package/components/Button/Button.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mixins.js","sourceRoot":"","sources":["../../../components/Button/Button.mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,IAAM,aAAa,GAAG,UAAC,QAAgB,EAAE,QAAgB;IACvD,OAAO,UAAG,QAAQ,cAAI,QAAQ,cAAI,QAAQ,CAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,UAC5B,aAAqB,EACrB,kBAA0B,EAC1B,gBAAwB,EACxB,KAAa,EACb,WAAmB,EACnB,WAAmB;IAEnB,IAAM,WAAW,GAAG,kBAAkB,KAAK,gBAAgB,CAAC;IAC5D,OAAO,kCACe,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,sCACvC,WAAW,CAAC,CAAC,CAAC,0BAAmB,kBAAkB,eAAK,gBAAgB,MAAG,CAAC,CAAC,CAAC,MAAM,2BAC/F,KAAK,sCACM,WAAW,cAAI,WAAW,8DAIzC,aAAa,CAAC,KAAK,oCACX,KAAK,0BAGnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAC9B,aAAqB,EACrB,kBAA0B,EAC1B,gBAAwB,EACxB,KAAa,EACb,WAAmB,EACnB,WAAmB;IAEnB,IAAM,WAAW,GAAG,kBAAkB,KAAK,gBAAgB,CAAC;IAC5D,OAAO,kCACe,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,sCACvC,WAAW,CAAC,CAAC,CAAC,0BAAmB,kBAAkB,eAAK,gBAAgB,MAAG,CAAC,CAAC,CAAC,MAAM,sCACpF,WAAW,cAAI,WAAW,2BACrC,KAAK,UACf,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAC/B,aAAqB,EACrB,SAAiB,EACjB,WAAmB,EACnB,WAAmB;IAEnB,OAAO,+HAIiB,aAAa,6EACb,WAAW,cAAI,WAAW,8DAE3C,aAAa,CAAC,WAAW,qCACZ,SAAS,0BAG5B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,QAAgB,EAAE,UAAkB,EAAE,QAAgB,EAAE,QAAgB;IACtG,OAAO,2BACQ,QAAQ,0DAEV,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,iCAC7B,UAAU,UAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { globalClasses } from './Button.styles.js';\n\nconst getBtnPadding = (paddingY: string, paddingX: string): string => {\n  return `${paddingY} ${paddingX} ${paddingY}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderWidth: string,\n): string => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return `\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    color: ${color};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor};\n\n    :enabled:hover,\n    :enabled {\n      .${globalClasses.arrow} svg {\n        color: ${color};\n      }\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderWidth: string,\n): string => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return `\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor};\n    color: ${color};\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderWidth: string,\n): string => {\n  return `\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ${btnBackground} !important; // override :hover styles\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor} !important; // override :hover styles\n\n      .${globalClasses.innerShadow} {\n        box-shadow: ${btnShadow};\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string): string => {\n  return `\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(paddingY, paddingX)};\n    line-height: ${lineHeight};\n  `;\n};\n"]}

package/components/Button/Button.styles.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from '../../lib/theming/Theme';
+import type { Theme } from '../../lib/theming/Theme.js';
 export declare const globalClasses: {
     root: string;
     arrow: string;
@@ -7,7 +7,7 @@ export declare const globalClasses: {
     innerShadow: string;
     disabled: string;
 };
-export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     root(t: Theme): string;
     withArrowIconRightSmall(t: Theme): string;
     withArrowIconRightMedium(t: Theme): string;
@@ -74,7 +74,7 @@ export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter
     loading(): string;
     visibilityHidden(): string;
 }>;
-export declare const getActiveStyles: import("../../lib/theming/Emotion").StylesGetter<{
+export declare const getActiveStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     default(t: Theme): string;
     primary(t: Theme): string;
     success(t: Theme): string;