@alfalab/core-components 20.2.0 → 20.4.0

package/tabs/modern/mobile.js

@@ -5,10 +5,10 @@ import '../../keyboard-focusable/modern';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
 export { useTabs } from './useTabs.js';
 import './components/primary-tablist/Component.js';
-import './index.module-1dc9f24d.js';
+import './index.module-fbbc84ff.js';
 import '../../tag/modern';
 import './components/secondary-tablist/Component.js';
-import './index.module-95ac737a.js';
+import './index.module-c8448fef.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
 export { PrimaryTabListMobile } from './components/primary-tablist/Component.mobile.js';

package/tabs/modern/responsive.js

@@ -6,11 +6,11 @@ import '../../keyboard-focusable/modern';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
 export { useTabs } from './useTabs.js';
 import './components/primary-tablist/Component.js';
-import './index.module-1dc9f24d.js';
+import './index.module-fbbc84ff.js';
 import './components/primary-tablist/Component.desktop.js';
 import '../../tag/modern';
 import './components/secondary-tablist/Component.js';
-import './index.module-95ac737a.js';
+import './index.module-c8448fef.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';

package/tabs/responsive.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-7a15cf39.js');
+require('./tslib.es6-da6ab86a.js');
 require('react');
 require('../keyboard-focusable');
 require('classnames');
@@ -8,11 +8,11 @@ require('compute-scroll-into-view');
 var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
 var useTabs = require('./useTabs.js');
 require('./components/primary-tablist/Component.js');
-require('./index.module-0ed2b345.js');
+require('./index.module-91539407.js');
 require('./components/primary-tablist/Component.desktop.js');
 require('../tag');
 require('./components/secondary-tablist/Component.js');
-require('./index.module-23528269.js');
+require('./index.module-95d8761b.js');
 require('./components/secondary-tablist/Component.desktop.js');
 var components_tab_Component = require('./components/tab/Component.js');
 require('./components/tabs/Component.js');

package/tabs/tslib.es6-da6ab86a.d.ts

@@ -0,0 +1,32 @@
+declare function __extends(d: any, b: any): void;
+declare function __rest(s: any, e: any): {};
+declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
+declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
+declare function __metadata(metadataKey: any, metadataValue: any): any;
+declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
+declare function __generator(thisArg: any, body: any): {
+    next: (v: any) => any;
+    throw: (v: any) => any;
+    return: (v: any) => any;
+};
+declare function __exportStar(m: any, o: any): void;
+declare function __values(o: any): any;
+declare function __read(o: any, n: any): any;
+declare function __spread(...args: any[]): any[];
+declare function __spreadArrays(...args: any[]): any[];
+declare function __await(v: any): any;
+declare class __await {
+    constructor(v: any);
+    v: any;
+}
+declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
+declare function __asyncDelegator(o: any): {};
+declare function __asyncValues(o: any): any;
+declare function __makeTemplateObject(cooked: any, raw: any): any;
+declare function __importStar(mod: any): any;
+declare function __importDefault(mod: any): any;
+declare function __classPrivateFieldGet(receiver: any, privateMap: any): any;
+declare function __classPrivateFieldSet(receiver: any, privateMap: any, value: any): any;
+declare function __assign(...args: any[]): any;
+declare function __createBinding(o: any, m: any, k: any, k2: any): void;
+export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding };

package/tabs/tslib.es6-da6ab86a.js

@@ -0,0 +1,40 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+exports.__assign = function () {
+    exports.__assign = Object.assign || function __assign(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 exports.__assign.apply(this, arguments);
+};
+function __rest(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;
+}
+
+exports.__rest = __rest;

package/tag/cssm/Component.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import React from 'react';
+import { ButtonHTMLAttributes } from "react";
+type NativeProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type TagProps = Omit<NativeProps, 'onClick'> & {
+    /**
+     * Отображение кнопки в отмеченном (зажатом) состоянии
+     */
+    checked?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Слот слева
+     */
+    leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: React.ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Обработчик нажатия
+     */
+    onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload?: {
+        checked: boolean;
+        name?: string;
+    }) => void;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+};
+declare const Tag: React.ForwardRefExoticComponent<Pick<NativeProps, "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    /**
+     * Отображение кнопки в отмеченном (зажатом) состоянии
+     */
+    checked?: boolean | undefined;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m" | "l" | "xl" | undefined;
+    /**
+     * Слот слева
+     */
+    leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: React.ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+    /**
+     * Обработчик нажатия
+     */
+    onClick?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined, payload?: {
+        checked: boolean;
+        name?: string | undefined;
+    } | undefined) => void) | undefined;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { TagProps, Tag };

package/tag/cssm/Component.js

@@ -0,0 +1,89 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var mergeRefs = require('react-merge-refs');
+var hooks = require('@alfalab/hooks');
+var styles = require('./index.module.css');
+var defaultColors = require('./default.module.css');
+var invertedColors = require('./inverted.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
+var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(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);
+};
+function __rest(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 colorStylesMap = {
+    default: defaultColors__default['default'],
+    inverted: invertedColors__default['default'],
+};
+var Tag = React.forwardRef(function (_a, ref) {
+    var _b;
+    var rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, children = _a.children, _c = _a.size, size = _c === void 0 ? 's' : _c, checked = _a.checked, className = _a.className, dataTestId = _a.dataTestId, name = _a.name, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, onClick = _a.onClick, restProps = __rest(_a, ["rightAddons", "leftAddons", "children", "size", "checked", "className", "dataTestId", "name", "colors", "onClick"]);
+    var colorStyles = colorStylesMap[colors];
+    var tagRef = React.useRef(null);
+    var focused = hooks.useFocus(tagRef, 'keyboard')[0];
+    var tagProps = {
+        className: cn__default['default'](styles__default['default'].component, colorStyles.component, styles__default['default'][size], (_b = {},
+            _b[styles__default['default'].checked] = checked,
+            _b[colorStyles.checked] = checked,
+            _b[styles__default['default'].focused] = focused,
+            _b[styles__default['default'].iconOnly] = !children,
+            _b), className),
+        'data-test-id': dataTestId,
+    };
+    var handleClick = function (event) {
+        if (onClick) {
+            onClick(event, { name: name, checked: !checked });
+        }
+    };
+    return (React__default['default'].createElement("button", __assign({ ref: mergeRefs__default['default']([tagRef, ref]), type: 'button', onClick: handleClick }, tagProps, restProps),
+        leftAddons ? React__default['default'].createElement("span", { className: styles__default['default'].addons }, leftAddons) : null,
+        children && React__default['default'].createElement("span", null, children),
+        rightAddons ? React__default['default'].createElement("span", { className: styles__default['default'].addons }, rightAddons) : null));
+});
+
+exports.Tag = Tag;

package/tag/cssm/default.module.css

@@ -0,0 +1,72 @@
+:root {
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-border-key: #0b1f35;
+    --color-light-border-primary: #dbdee1;
+    --color-light-border-secondary-inverted: #b6bcc3;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-text-tertiary: #b6bcc3;
+    --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* border */
+    --tag-border-color: var(--color-light-border-secondary-inverted);
+    --tag-border-color-hover: var(--color-light-border-key);
+    --tag-border-color-active: var(--color-light-border-key);
+    --tag-border-color-checked: var(--color-light-border-key);
+    --tag-border-color-disabled: var(--color-light-border-primary);
+    --tag-border-color-checked-disabled: transparent;
+
+    /* background-color */
+    --tag-background-color: transparent;
+    --tag-background-color-hover: transparent;
+    --tag-background-color-active: var(--color-light-bg-primary-inverted-alpha-7);
+    --tag-background-color-checked: var(--color-light-bg-primary-inverted);
+    --tag-background-color-checked-disabled: var(--color-light-bg-primary-inverted-alpha-15);
+
+    /* text color */
+    --tag-text-color: var(--color-light-text-primary);
+    --tag-text-color-checked: var(--color-light-text-primary-inverted);
+    --tag-text-color-disabled: var(--color-light-text-tertiary);
+    --tag-text-color-checked-disabled: var(--color-light-text-primary-inverted);
+}
+.component {
+    color: var(--tag-text-color);
+    border-color: var(--tag-border-color);
+    background-color: var(--tag-background-color)
+}
+.component:disabled {
+        border-color: var(--tag-border-color-disabled);
+        color: var(--tag-text-color-disabled);
+    }
+.component:hover:not(:disabled) {
+        border-color: var(--tag-border-color-hover);
+        background-color: var(--tag-background-color-hover);
+    }
+.component:active:not(:disabled) {
+        border-color: var(--tag-border-color-active);
+        background-color: var(--tag-background-color-active);
+        color: var(--tag-text-color);
+    }
+.checked {
+    border-color: var(--tag-border-color-checked);
+    background-color: var(--tag-background-color-checked);
+    color: var(--tag-text-color-checked)
+}
+.checked:disabled {
+        background-color: var(--tag-background-color-checked-disabled);
+        border-color: var(--tag-border-color-checked-disabled);
+        color: var(--tag-text-color-checked-disabled);
+    }
+.checked:hover:not(:disabled):not(:active) {
+        background-color: var(--tag-background-color-checked);
+    }

package/tag/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/tag/cssm/index.js

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('react');
+require('classnames');
+require('react-merge-refs');
+require('@alfalab/hooks');
+require('./index.module.css');
+require('./default.module.css');
+require('./inverted.module.css');
+
+
+
+exports.Tag = Component.Tag;

package/tag/cssm/index.module.css

@@ -0,0 +1,152 @@
+:root {
+    --color-light-border-link: #007aff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+}
+:root {
+    --border-radius-pill: 99px;
+}
+:root {
+    --focus-color: var(--color-light-border-link);
+    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+    --disabled-cursor: not-allowed;
+    --size-xs-height: 32px;
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+    --size-l-height: 64px;
+    --size-xl-height: 72px;
+}
+:root {
+    /* border */
+    --tag-border-width: 1px;
+    --tag-border-radius: var(--border-radius-pill);
+}
+.component {
+    display: inline-flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    margin: 0;
+    font-family: var(--font-family);
+    text-decoration: none;
+    border-width: var(--tag-border-width);
+    border-style: solid;
+    border-radius: var(--tag-border-radius);
+    transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease;
+    box-sizing: border-box;
+    box-shadow: none;
+    -webkit-user-select: none;
+            user-select: none;
+    cursor: pointer;
+    outline: none
+}
+.component:disabled {
+        cursor: var(--disabled-cursor);
+    }
+.focused {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}
+.addons {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center
+}
+.addons:first-child {
+        margin-right: var(--gap-xs);
+    }
+.addons:last-child {
+        margin-left: var(--gap-xs);
+    }
+.addons:only-child {
+        margin: 0;
+    }
+.xs {
+    min-width: 60px;
+    min-height: var(--size-xs-height);
+    padding: var(--gap-2xs) var(--gap-m);
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: normal
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+.xs {
+        /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
+        Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
+        height: 32px
+}
+    }
+.s {
+    min-width: 80px;
+    min-height: var(--size-s-height);
+    padding: var(--gap-2xs) var(--gap-m);
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: normal
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+.s {
+        /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
+        Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
+        height: 48px
+}
+    }
+.m {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 500;
+    min-width: 96px;
+    min-height: var(--size-m-height);
+    padding: var(--gap-2xs) var(--gap-xl)
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+.m {
+        /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
+        Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
+        height: 56px
+}
+    }
+.l {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 500;
+    min-width: 120px;
+    min-height: var(--size-l-height);
+    padding: var(--gap-2xs) var(--gap-2xl)
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+.l {
+        /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
+        Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
+        height: 64px
+}
+    }
+.xl {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 500;
+    min-width: 120px;
+    min-height: var(--size-xl-height);
+    padding: var(--gap-2xs) var(--gap-2xl)
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+.xl {
+        /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
+        Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
+        height: 72px
+}
+    }

package/tag/cssm/inverted.module.css

@@ -0,0 +1,73 @@
+:root {
+    --color-dark-bg-primary-inverted: #fff;
+    --color-dark-border-key: #fff;
+    --color-dark-border-primary: #485767;
+    --color-dark-border-secondary-inverted: #6d7986;
+    --color-dark-text-primary: #fff;
+    --color-dark-text-primary-inverted: #0b1f35;
+    --color-dark-text-tertiary: #6d7986;
+    --color-dark-bg-primary-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* border */
+    --tag-inverted-border-color: var(--color-dark-border-secondary-inverted);
+    --tag-inverted-border-color-hover: var(--color-dark-border-key);
+    --tag-inverted-border-color-active: var(--color-dark-border-key);
+    --tag-inverted-border-color-checked: var(--color-dark-border-key);
+    --tag-inverted-border-color-disabled: var(--color-dark-border-primary);
+    --tag-inverted-border-color-checked-disabled: transparent;
+
+    /* background-color */
+    --tag-inverted-background-color: transparent;
+    --tag-inverted-background-color-hover: transparent;
+    --tag-inverted-background-color-active: var(--color-dark-bg-primary-inverted-alpha-7);
+    --tag-inverted-background-color-checked: var(--color-dark-bg-primary-inverted);
+    --tag-inverted-background-color-checked-disabled: var(
+        --color-dark-bg-primary-inverted-alpha-15
+    );
+
+    /* text color */
+    --tag-inverted-text-color: var(--color-dark-text-primary);
+    --tag-inverted-text-color-checked: var(--color-dark-text-primary-inverted);
+    --tag-inverted-text-color-disabled: var(--color-dark-text-tertiary);
+    --tag-inverted-text-color-checked-disabled: var(--color-dark-text-primary-inverted);
+}
+.component {
+    color: var(--tag-inverted-text-color);
+    border-color: var(--tag-inverted-border-color);
+    background-color: var(--tag-inverted-background-color)
+}
+.component:disabled {
+        border-color: var(--tag-inverted-border-color-disabled);
+        color: var(--tag-inverted-text-color-disabled);
+    }
+.component:hover:not(:disabled) {
+        border-color: var(--tag-inverted-border-color-hover);
+        background-color: var(--tag-inverted-background-color-hover);
+    }
+.component:active:not(:disabled) {
+        border-color: var(--tag-inverted-border-color-active);
+        background-color: var(--tag-inverted-background-color-active);
+        color: var(--tag-inverted-text-color);
+    }
+.checked {
+    border-color: var(--tag-inverted-border-color-checked);
+    background-color: var(--tag-inverted-background-color-checked);
+    color: var(--tag-inverted-text-color-checked)
+}
+.checked:disabled {
+        background-color: var(--tag-inverted-background-color-checked-disabled);
+        border-color: var(--tag-inverted-border-color-checked-disabled);
+        color: var(--tag-inverted-text-color-checked-disabled);
+    }
+.checked:hover:not(:disabled):not(:active) {
+        background-color: var(--tag-inverted-background-color-checked);
+    }