@alfalab/core-components 48.21.0-beta.4 → 48.21.0

package/filter-tag/components/base-filter-tag/Component.js

@@ -7,17 +7,25 @@ var ChevronDownCompactSIcon = require('@alfalab/icons-glyph/ChevronDownCompactSI
 var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
 var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
 var CrossCircleSIcon = require('@alfalab/icons-glyph/CrossCircleSIcon');
+var helpers_isKeyboardEvent = require('../../helpers/is-keyboard-event.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var commonStyles = {"component":"filter-tag__component_6zi60","block":"filter-tag__block_6zi60","disabled":"filter-tag__disabled_6zi60","rounded":"filter-tag__rounded_6zi60","size-32":"filter-tag__size-32_6zi60","size-40":"filter-tag__size-40_6zi60","size-48":"filter-tag__size-48_6zi60","checked":"filter-tag__checked_6zi60","content":"filter-tag__content_6zi60","focused":"filter-tag__focused_6zi60","chevron":"filter-tag__chevron_6zi60","valueButton":"filter-tag__valueButton_6zi60","outlined":"filter-tag__outlined_6zi60","filled":"filter-tag__filled_6zi60","open":"filter-tag__open_6zi60","close":"filter-tag__close_6zi60","clear":"filter-tag__clear_6zi60","iconWrapper":"filter-tag__iconWrapper_6zi60"};
+var defaultColors = {"component":"filter-tag__component_11tiw","disabled":"filter-tag__disabled_11tiw","checked":"filter-tag__checked_11tiw","chevron":"filter-tag__chevron_11tiw","valueButton":"filter-tag__valueButton_11tiw","outlined":"filter-tag__outlined_11tiw","filled":"filter-tag__filled_11tiw","clear":"filter-tag__clear_11tiw"};
+require('./default.css');
+
+var commonStyles = {"component":"filter-tag__component_6zi60","block":"filter-tag__block_6zi60","rounded":"filter-tag__rounded_6zi60","size-32":"filter-tag__size-32_6zi60","size-40":"filter-tag__size-40_6zi60","size-48":"filter-tag__size-48_6zi60","checked":"filter-tag__checked_6zi60","disabled":"filter-tag__disabled_6zi60","content":"filter-tag__content_6zi60","focused":"filter-tag__focused_6zi60","chevron":"filter-tag__chevron_6zi60","valueButton":"filter-tag__valueButton_6zi60","open":"filter-tag__open_6zi60","close":"filter-tag__close_6zi60","withClear":"filter-tag__withClear_6zi60","addons":"filter-tag__addons_6zi60","clear":"filter-tag__clear_6zi60"};
 require('./index.css');
 
-var isKeyBoardEvent = function (event) {
-    return event.key !== undefined;
+var invertedColors = {"component":"filter-tag__component_1c2gj","disabled":"filter-tag__disabled_1c2gj","checked":"filter-tag__checked_1c2gj","chevron":"filter-tag__chevron_1c2gj","valueButton":"filter-tag__valueButton_1c2gj","outlined":"filter-tag__outlined_1c2gj","filled":"filter-tag__filled_1c2gj","clear":"filter-tag__clear_1c2gj"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
 };
 var SIZE_TO_CLASSNAME_MAP = {
     xxs: 'size-32',
@@ -29,12 +37,12 @@ var SIZE_TO_CLASSNAME_MAP = {
 };
 var BaseFilterTag = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var children = _a.children, checked = _a.checked, disabled = _a.disabled, open = _a.open, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, shape = _a.shape, _f = _a.view, view = _f === void 0 ? 'outlined' : _f, _g = _a.onClear, onClear = _g === void 0 ? function () { return null; } : _g, _h = _a.showClear, showClear = _h === void 0 ? true : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, dataTestId = _a.dataTestId, _k = _a.styles, styles = _k === void 0 ? {} : _k;
+    var children = _a.children, checked = _a.checked, disabled = _a.disabled, open = _a.open, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, shape = _a.shape, _f = _a.view, view = _f === void 0 ? 'outlined' : _f, _g = _a.onClear, onClear = _g === void 0 ? function () { return null; } : _g, _h = _a.showClear, showClear = _h === void 0 ? true : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, dataTestId = _a.dataTestId, _k = _a.styles, styles = _k === void 0 ? {} : _k, _l = _a.colors, colors = _l === void 0 ? 'default' : _l, _m = _a.colorStylesMap, colorStylesMap = _m === void 0 ? { default: {}, inverted: {} } : _m, leftAddons = _a.leftAddons;
     var valueRef = React.useRef(null);
     var focused = hooks.useFocus(valueRef, 'keyboard')[0];
     var handleClear = function (event) {
         event.stopPropagation();
-        if (isKeyBoardEvent(event)) {
+        if (helpers_isKeyboardEvent.isKeyBoardEvent(event)) {
             var clickSimilarKeys = ['Enter'].includes(event.key);
             if (clickSimilarKeys)
                 onClear();
@@ -46,28 +54,33 @@ var BaseFilterTag = React.forwardRef(function (_a, ref) {
     var shapeClassName = shape || variantClassName;
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React__default.default.createElement("div", { className: cn__default.default(className, commonStyles.component, commonStyles[shapeClassName], commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles.component, styles[shapeClassName], styles[SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
+    React__default.default.createElement("div", { className: cn__default.default(className, commonStyles.component, colorStyles[colors].component, commonStyles[shapeClassName], commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles.component, styles[shapeClassName], styles[SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
             _b[commonStyles.checked] = checked,
+            _b[colorStyles[colors].checked] = checked,
             _b[styles.checked] = checked,
             _b[commonStyles.disabled] = disabled,
+            _b[colorStyles[colors].disabled] = disabled,
             _b[styles.disabled] = disabled,
             _b[commonStyles.focused] = focused,
             _b[commonStyles.open] = open,
             _b[commonStyles.block] = block,
             _b)), ref: ref, "data-test-id": dataTestId, onClick: disabled ? undefined : onClick },
-        React__default.default.createElement("button", { type: 'button', ref: valueRef, disabled: disabled, className: cn__default.default(commonStyles.valueButton, styles.valueButton, commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles[SIZE_TO_CLASSNAME_MAP[size]], commonStyles[shapeClassName], styles[shapeClassName], commonStyles[view], (_c = {},
+        React__default.default.createElement("button", { type: 'button', ref: valueRef, disabled: disabled, className: cn__default.default(commonStyles.valueButton, colorStyles[colors].valueButton, styles.valueButton, colorStylesMap[colors].valueButton, commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles[SIZE_TO_CLASSNAME_MAP[size]], commonStyles[shapeClassName], styles[shapeClassName], commonStyles[view], colorStyles[colors][view], (_c = {},
                 _c[styles[view]] = Boolean(styles[view]),
+                _c[colorStylesMap[colors][view]] = Boolean(colorStylesMap[colors][view]),
                 _c[commonStyles.checked] = checked,
+                _c[colorStyles[colors].checked] = checked,
                 _c[styles.checked] = checked,
                 _c[commonStyles.open] = open,
                 _c[commonStyles.close] = !showClear,
                 _c[styles.close] = !showClear,
                 _c[commonStyles.block] = block,
+                _c[commonStyles.withClear] = showClear,
                 _c)) },
+            leftAddons && React__default.default.createElement("div", { className: commonStyles.addons }, leftAddons),
             React__default.default.createElement("span", { className: commonStyles.content }, children),
-            React__default.default.createElement("span", { className: commonStyles.chevron }, ['size-40', 'size-32'].includes(SIZE_TO_CLASSNAME_MAP[size]) ? (React__default.default.createElement(ChevronDownCompactSIcon.ChevronDownCompactSIcon, null)) : (React__default.default.createElement(ChevronDownMIcon.ChevronDownMIcon, null)))),
-        checked && !disabled && showClear && (React__default.default.createElement("div", { role: 'button', className: cn__default.default(commonStyles.clear, styles.clear, commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles[SIZE_TO_CLASSNAME_MAP[size]], styles[shapeClassName], commonStyles[shapeClassName]), onClick: handleClear, onKeyDown: handleClear, tabIndex: 0 },
-            React__default.default.createElement("span", { className: commonStyles.iconWrapper }, SIZE_TO_CLASSNAME_MAP[size] === 'size-32' ? (React__default.default.createElement(CrossCircleSIcon.CrossCircleSIcon, null)) : (React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, null)))))));
+            React__default.default.createElement("span", { className: cn__default.default(commonStyles.chevron, colorStyles[colors].chevron) }, ['size-40', 'size-32'].includes(SIZE_TO_CLASSNAME_MAP[size]) ? (React__default.default.createElement(ChevronDownCompactSIcon.ChevronDownCompactSIcon, null)) : (React__default.default.createElement(ChevronDownMIcon.ChevronDownMIcon, null)))),
+        checked && !disabled && showClear && (React__default.default.createElement("div", { role: 'button', className: cn__default.default(commonStyles.clear, [colorStyles[colors].clear], styles.clear, commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles[SIZE_TO_CLASSNAME_MAP[size]], styles[shapeClassName], commonStyles[shapeClassName]), onClick: handleClear, onKeyDown: handleClear, tabIndex: 0 }, ['size-40', 'size-32'].includes(SIZE_TO_CLASSNAME_MAP[size]) ? (React__default.default.createElement(CrossCircleSIcon.CrossCircleSIcon, null)) : (React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, null))))));
 });
 
 exports.BaseFilterTag = BaseFilterTag;

package/filter-tag/components/base-filter-tag/default.css

@@ -0,0 +1,192 @@
+/* hash: q93q3 */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-accent-secondary: #212124;
+    --color-light-accent-secondary-hover: #2f2f32;
+    --color-light-accent-secondary-press: #353539;
+    --color-light-neutral-500: #babbc2;
+    --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
+    --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
+    --color-light-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
+    --color-light-neutral-translucent-700-inverted: rgba(238, 238, 251, 0.55);
+    --color-light-neutral-translucent-700-inverted-hover: rgba(239, 240, 252, 0.65);
+    --color-light-neutral-translucent-700-inverted-press: rgba(243, 245, 254, 0.75);
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+    --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
+    --color-light-text-tertiary: rgba(5, 8, 29, 0.38);
+    --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
+    --color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
+} :root {
+} :root {
+} /* сбрасывает синюю подсветку при нажатии */ :root {
+    /* border */
+    --tag-border-color: var(--color-light-neutral-translucent-500);
+    --tag-filled-border-color: transparent;
+    --tag-border-color-hover: var(--color-light-neutral-translucent-500);
+    --tag-border-color-active: var(--color-light-neutral-translucent-500);
+    --tag-border-color-checked: var(--color-light-accent-secondary);
+    --tag-border-color-disabled: var(--color-light-neutral-translucent-500);
+    --tag-border-width: 1px;
+
+    /* rectangular border-radius */
+
+    /* rounded border-radius */
+
+    /* background-color outlined */
+    --tag-outlined-background-color: transparent;
+    --tag-outlined-background-color-hover: var(--color-light-transparent-default-hover);
+    --tag-outlined-background-color-active: var(--color-light-transparent-default-press);
+    --tag-outlined-background-color-disabled: transparent;
+
+    /* background-color filled */
+
+    /* background-color checked */
+    --tag-background-color-checked: var(--color-light-accent-secondary);
+    --tag-background-color-checked-hover: var(--color-light-accent-secondary-hover);
+    --tag-background-color-checked-active: var(--color-light-accent-secondary-press);
+    --tag-background-color-checked-disabled: var(--color-light-neutral-translucent-100);
+
+    /* 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-tertiary);
+
+    /* inverted */
+
+    /* border */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* mobile */
+
+    /* mobile inverted */
+} :root {
+    /* chevron */
+    --filter-tag-chevron-color: var(--color-light-neutral-translucent-1300);
+    --filter-tag-chevron-disabled-color: var(--color-light-neutral-500);
+
+    /* chevron inverted */
+    --filter-tag-inverted-chevron-color: var(--color-light-neutral-translucent-1300-inverted);
+
+    /* separator */
+    --filter-tag-separator-background-color-hover: transparent;
+    --filter-tag-separator-background-color-active: transparent;
+
+    /* separator inverted */
+
+    /* clear */
+    --filter-tag-clear-color: var(--color-light-neutral-translucent-700-inverted);
+    --filter-tag-clear-color-hover: var(--color-light-neutral-translucent-700-inverted-hover);
+    --filter-tag-clear-color-active: var(--color-light-neutral-translucent-700-inverted-press);
+    --filter-tag-clear-before-background-color: var(--color-light-neutral-translucent-500-inverted);
+
+    /* clear inverted */
+} .filter-tag__component_11tiw.filter-tag__disabled_11tiw {
+        background-color: var(--tag-outlined-background-color-disabled);
+    } .filter-tag__component_11tiw.filter-tag__checked_11tiw:not(.filter-tag__disabled_11tiw) {
+            background-color: var(--tag-background-color-checked);
+        } @media (hover: hover) {
+            .filter-tag__component_11tiw.filter-tag__checked_11tiw:not(.filter-tag__disabled_11tiw):hover {
+                background-color: var(--tag-background-color-checked-hover);
+            }
+        } .filter-tag__component_11tiw.filter-tag__checked_11tiw:not(.filter-tag__disabled_11tiw):active {
+            background-color: var(--tag-background-color-checked-active);
+        } .filter-tag__chevron_11tiw {
+    color: var(--filter-tag-chevron-color);
+} .filter-tag__valueButton_11tiw {
+    color: var(--tag-text-color);
+    background-color: var(--tag-outlined-background-color);
+    border: var(--tag-border-width) solid var(--tag-border-color)
+} .filter-tag__valueButton_11tiw:disabled > .filter-tag__chevron_11tiw {
+            color: var(--filter-tag-chevron-disabled-color);
+        } .filter-tag__valueButton_11tiw.filter-tag__outlined_11tiw {
+        color: var(--tag-text-color);
+        border-color: var(--tag-border-color);
+        background-color: var(--tag-outlined-background-color)
+    } .filter-tag__valueButton_11tiw.filter-tag__outlined_11tiw:disabled {
+            border-color: var(--tag-border-color-disabled);
+            color: var(--tag-text-color-disabled);
+            background-color: var(--tag-outlined-background-color-disabled);
+        } @media (hover: hover) {
+            .filter-tag__valueButton_11tiw.filter-tag__outlined_11tiw:not(:disabled):hover {
+                border-color: var(--tag-border-color-hover);
+                background-color: var(--tag-outlined-background-color-hover);
+            }
+        } .filter-tag__valueButton_11tiw.filter-tag__outlined_11tiw:not(:disabled):active {
+            border-color: var(--tag-border-color-active);
+            background-color: var(--tag-outlined-background-color-active);
+        } .filter-tag__valueButton_11tiw.filter-tag__filled_11tiw {
+        color: var(--tag-text-color);
+        border-color: var(--tag-filled-border-color)
+    } .filter-tag__valueButton_11tiw.filter-tag__filled_11tiw:disabled {
+            color: var(--tag-text-color-disabled);
+        } .filter-tag__valueButton_11tiw.filter-tag__checked_11tiw {
+        color: var(--tag-text-color-checked);
+        background-color: var(--tag-background-color-checked);
+        border-color: var(--tag-border-color-checked)
+    } .filter-tag__valueButton_11tiw.filter-tag__checked_11tiw > .filter-tag__chevron_11tiw {
+            color: var(--filter-tag-inverted-chevron-color);
+        } @media (hover: hover) {
+            .filter-tag__valueButton_11tiw.filter-tag__checked_11tiw:not(:disabled):hover {
+                background-color: var(--tag-background-color-checked-hover);
+            }
+        } .filter-tag__valueButton_11tiw.filter-tag__checked_11tiw:not(:disabled):active {
+            background-color: var(--tag-background-color-checked-active);
+        } @media (hover: hover) {
+            .filter-tag__valueButton_11tiw.filter-tag__checked_11tiw:not(:disabled):hover + .filter-tag__clear_11tiw:before {
+                background-color: var(--filter-tag-separator-background-color-hover);
+            }
+        } .filter-tag__valueButton_11tiw.filter-tag__checked_11tiw:not(:disabled):active + .filter-tag__clear_11tiw:before {
+            background-color: var(--filter-tag-separator-background-color-active);
+        } .filter-tag__valueButton_11tiw.filter-tag__checked_11tiw:disabled {
+            color: var(--tag-text-color-checked-disabled);
+            background-color: var(--tag-background-color-checked-disabled)
+        } .filter-tag__valueButton_11tiw.filter-tag__checked_11tiw:disabled > .filter-tag__chevron_11tiw {
+                color: var(--filter-tag-chevron-disabled-color);
+            } .filter-tag__clear_11tiw {
+    color: var(--filter-tag-clear-color);
+    background-color: var(--tag-background-color-checked)
+} .filter-tag__clear_11tiw:before {
+        background-color: var(--filter-tag-clear-before-background-color);
+    } @media (hover: hover) {
+        .filter-tag__clear_11tiw:hover:before {
+            background-color: var(--filter-tag-separator-background-color-hover);
+        }
+    } .filter-tag__clear_11tiw:active:before {
+        background-color: var(--filter-tag-separator-background-color-active);
+    } @media (hover: hover) {
+        .filter-tag__clear_11tiw:hover {
+            color: var(--filter-tag-clear-color-hover);
+            background-color: var(--tag-background-color-checked-hover);
+        }
+    } .filter-tag__clear_11tiw:active {
+        color: var(--filter-tag-clear-color-active);
+        background-color: var(--tag-background-color-checked-active);
+    }