@alfalab/core-components 26.8.0 → 26.11.0

package/badge/Component.js

@@ -8,20 +8,58 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"badge__component_8ovou","s":"badge__s_8ovou","m":"badge__m_8ovou","l":"badge__l_8ovou","icon":"badge__icon_8ovou","positive":"badge__positive_8ovou","attention":"badge__attention_8ovou","negative":"badge__negative_8ovou","link":"badge__link_8ovou","tertiary":"badge__tertiary_8ovou","secondary":"badge__secondary_8ovou","primary":"badge__primary_8ovou","outline":"badge__outline_8ovou","dot":"badge__dot_8ovou","isHidden":"badge__isHidden_8ovou"};
+/*! *****************************************************************************
+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);
+};
+
+var styles = {"component":"badge__component_13av5","count":"badge__count_13av5","outlineCount":"badge__outlineCount_13av5","s":"badge__s_13av5","m":"badge__m_13av5","l":"badge__l_13av5","heightS":"badge__heightS_13av5","heightM":"badge__heightM_13av5","heightL":"badge__heightL_13av5","heightXL":"badge__heightXL_13av5","heightXXL":"badge__heightXXL_13av5","wrapper":"badge__wrapper_13av5","xl":"badge__xl_13av5","icon":"badge__icon_13av5","positive":"badge__positive_13av5","attention":"badge__attention_13av5","negative":"badge__negative_13av5","link":"badge__link_13av5","tertiary":"badge__tertiary_13av5","secondary":"badge__secondary_13av5","primary":"badge__primary_13av5","outline":"badge__outline_13av5","outlineColor":"badge__outlineColor_13av5","dot":"badge__dot_13av5","isHidden":"badge__isHidden_13av5"};
 require('./index.css');
 
 var Badge = function (_a) {
-    var _b;
-    var className = _a.className, _c = _a.size, size = _c === void 0 ? 'm' : _c, view = _a.view, _d = _a.visibleIconOutline, visibleIconOutline = _d === void 0 ? false : _d, content = _a.content, iconColor = _a.iconColor, dataTestId = _a.dataTestId;
+    var _b, _c;
+    var className = _a.className, _d = _a.size, size = _d === void 0 ? 'm' : _d, view = _a.view, _e = _a.visibleIconOutline, visibleIconOutline = _e === void 0 ? false : _e, _f = _a.visibleColorOutline, visibleColorOutline = _f === void 0 ? false : _f, content = _a.content, _g = _a.height, height = _g === void 0 ? 16 : _g, iconColor = _a.iconColor, dataTestId = _a.dataTestId;
     var isCountView = view === 'count';
     var isHidden = isCountView && typeof content === 'number' && content <= 0;
     var componentContent = isCountView && content && content >= 100 ? '99+' : content;
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[size], styles[view], iconColor && styles[iconColor], (_b = {},
-            _b[styles.isHidden] = isHidden,
-            _b[styles.dot] = !content,
-            _b[styles.outline] = visibleIconOutline,
-            _b), className), "data-test-id": dataTestId }, componentContent));
+    var isHeightS = isCountView && height >= 16 && height <= 17;
+    var isHeightM = isCountView && height >= 18 && height <= 24;
+    var isHeightL = isCountView && height >= 25 && height <= 32;
+    var isHeightXL = isCountView && height >= 33 && height <= 40;
+    var isHeightXXL = isCountView && height >= 41 && height <= 48;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](!isCountView && styles.wrapper, iconColor && styles[iconColor], (_b = {},
+            _b[styles[size]] = !isCountView,
+            _b[styles.outline] = !isCountView && visibleIconOutline,
+            _b[styles.outlineColor] = visibleColorOutline,
+            _b[styles.outlineCount] = isCountView && visibleIconOutline,
+            _b[styles.count] = isCountView,
+            _b)) },
+        React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[size], styles[view], iconColor && styles[iconColor], isHeightS && styles.heightS, isHeightM && styles.heightM, isHeightL && styles.heightL, isHeightXL && styles.heightXL, isHeightXXL && styles.heightXXL, (_c = {},
+                _c[styles.isHidden] = isHidden,
+                _c[styles.dot] = !content,
+                _c), className), style: __assign({}, (isCountView && content && { height: height, minWidth: height })), "data-test-id": dataTestId }, componentContent)));
 };
 
 exports.Badge = Badge;

package/badge/cssm/Component.d.ts

@@ -10,17 +10,26 @@ type BadgeProps = {
      */
     view: 'icon' | 'count';
     /**
-     * Размер компонента (только для view=count)
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
      */
-    size?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
     /**
-     *  Видимость обводки вокруг иконки (только для view=icon)
+     *  Видимость белой обводки вокруг иконки
      */
     visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
     /**
      * Контент компонента
      */
     content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
     /**
      * Цветовое оформление иконки
      */
@@ -30,5 +39,5 @@ type BadgeProps = {
      */
     dataTestId?: string;
 };
-declare const Badge: ({ className, size, view, visibleIconOutline, content, iconColor, dataTestId, }: BadgeProps) => JSX.Element;
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId, }: BadgeProps) => JSX.Element;
 export { BadgeProps, Badge };

package/badge/cssm/Component.js

@@ -10,17 +10,55 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
+/*! *****************************************************************************
+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);
+};
+
 var Badge = function (_a) {
-    var _b;
-    var className = _a.className, _c = _a.size, size = _c === void 0 ? 'm' : _c, view = _a.view, _d = _a.visibleIconOutline, visibleIconOutline = _d === void 0 ? false : _d, content = _a.content, iconColor = _a.iconColor, dataTestId = _a.dataTestId;
+    var _b, _c;
+    var className = _a.className, _d = _a.size, size = _d === void 0 ? 'm' : _d, view = _a.view, _e = _a.visibleIconOutline, visibleIconOutline = _e === void 0 ? false : _e, _f = _a.visibleColorOutline, visibleColorOutline = _f === void 0 ? false : _f, content = _a.content, _g = _a.height, height = _g === void 0 ? 16 : _g, iconColor = _a.iconColor, dataTestId = _a.dataTestId;
     var isCountView = view === 'count';
     var isHidden = isCountView && typeof content === 'number' && content <= 0;
     var componentContent = isCountView && content && content >= 100 ? '99+' : content;
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][size], styles__default['default'][view], iconColor && styles__default['default'][iconColor], (_b = {},
-            _b[styles__default['default'].isHidden] = isHidden,
-            _b[styles__default['default'].dot] = !content,
-            _b[styles__default['default'].outline] = visibleIconOutline,
-            _b), className), "data-test-id": dataTestId }, componentContent));
+    var isHeightS = isCountView && height >= 16 && height <= 17;
+    var isHeightM = isCountView && height >= 18 && height <= 24;
+    var isHeightL = isCountView && height >= 25 && height <= 32;
+    var isHeightXL = isCountView && height >= 33 && height <= 40;
+    var isHeightXXL = isCountView && height >= 41 && height <= 48;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](!isCountView && styles__default['default'].wrapper, iconColor && styles__default['default'][iconColor], (_b = {},
+            _b[styles__default['default'][size]] = !isCountView,
+            _b[styles__default['default'].outline] = !isCountView && visibleIconOutline,
+            _b[styles__default['default'].outlineColor] = visibleColorOutline,
+            _b[styles__default['default'].outlineCount] = isCountView && visibleIconOutline,
+            _b[styles__default['default'].count] = isCountView,
+            _b)) },
+        React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][size], styles__default['default'][view], iconColor && styles__default['default'][iconColor], isHeightS && styles__default['default'].heightS, isHeightM && styles__default['default'].heightM, isHeightL && styles__default['default'].heightL, isHeightXL && styles__default['default'].heightXL, isHeightXXL && styles__default['default'].heightXXL, (_c = {},
+                _c[styles__default['default'].isHidden] = isHidden,
+                _c[styles__default['default'].dot] = !content,
+                _c), className), style: __assign({}, (isCountView && content && { height: height, minWidth: height })), "data-test-id": dataTestId }, componentContent)));
 };
 
 exports.Badge = Badge;

package/badge/cssm/index.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var Component = require('./Component.js');
 require('react');
 require('classnames');
 require('./index.module.css');
-var Component = require('./Component.js');
 
 
 

package/badge/cssm/index.module.css

@@ -20,6 +20,9 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
 }
 :root {
     --border-radius-pill: 99px;
@@ -43,6 +46,14 @@
     color: var(--color-light-text-primary-inverted);
     overflow: hidden;
 }
+.count {
+    display: inline-flex;
+    padding: 2px;
+}
+.outlineCount {
+    background-color: var(--badge-icon-bg-color);
+    border-radius: 99px;
+}
 .s {
     height: 16px;
     min-width: 16px;
@@ -58,51 +69,124 @@
     min-width: 24px;
     padding: 0 6px;
 }
+.heightS {
+    padding: 0 var(--gap-2xs);
+}
+.heightM {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-2xs);
+}
+.heightL {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-xs);
+}
+.heightXL {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-s);
+}
+.heightXXL {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-m);
+}
+.wrapper {
+    border-radius: 50%
+}
+.wrapper.s {
+        padding: 2px;
+        min-width: 14px;
+        height: 14px;
+    }
+.wrapper.m {
+        padding: 2px;
+        width: 20px;
+        height: 20px;
+    }
+.wrapper.xl {
+        padding: 5px;
+        width: 30px;
+        height: 30px;
+    }
 .icon {
     height: auto;
     min-width: 0;
     padding: 0;
-    color: var(--color-light-graphic-positive);
-    background-color: transparent
+    color: var(--color-light-graphic-positive)
 }
 .icon.positive {
         color: var(--color-light-graphic-positive);
+        background-color: var(--color-light-graphic-positive);
     }
 .icon.attention {
         color: var(--color-light-graphic-attention);
+        background-color: var(--color-light-graphic-attention);
     }
 .icon.negative {
         color: var(--color-light-graphic-negative);
+        background-color: var(--color-light-graphic-negative);
     }
 .icon.link {
         color: var(--color-light-graphic-link);
+        background-color: var(--color-light-graphic-link);
     }
 .icon.tertiary {
         color: var(--color-light-graphic-tertiary);
+        background-color: var(--color-light-graphic-tertiary);
     }
 .icon.secondary {
         color: var(--color-light-graphic-secondary);
+        background-color: var(--color-light-graphic-secondary);
     }
 .icon.primary {
         color: var(--color-light-graphic-primary);
+        background-color: var(--color-light-graphic-primary);
     }
+.icon.s {
+    width: 14px;
+    height: 14px;
+}
 .icon:before {
     position: absolute;
     z-index: -1;
-    left: 16%;
-    right: 16%;
-    top: 16%;
-    bottom: 16%;
+    left: 18%;
+    right: 18%;
+    top: 18%;
+    bottom: 18%;
     background-color: var(--badge-icon-bg-color);
     border-radius: var(--border-radius-pill);
     content: '';
 }
-.outline:before {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+.outline {
+    background-color: var(--badge-icon-bg-color);
 }
+.outlineColor.attention {
+        background-color: var(--color-light-graphic-attention);
+    }
+.outlineColor.positive {
+        background-color: var(--color-light-graphic-positive);
+    }
+.outlineColor.negative {
+        background-color: var(--color-light-graphic-negative);
+    }
+.outlineColor.link {
+        background-color: var(--color-light-graphic-link);
+    }
+.outlineColor .tertiary {
+        background-color: var(--color-light-graphic-tertiary);
+    }
+.outlineColor.secondary {
+        background-color: var(--color-light-graphic-secondary);
+    }
+.outlineColor.primary {
+        background-color: var(--color-light-graphic-primary);
+    }
 .dot {
     width: 8px;
     height: 8px;
@@ -112,3 +196,11 @@
 .isHidden {
     display: none;
 }
+.m svg {
+    width: 20px;
+    height: 20px;
+}
+.xl svg {
+    width: 30px;
+    height: 30px;
+}

package/badge/esm/Component.d.ts

@@ -10,17 +10,26 @@ type BadgeProps = {
      */
     view: 'icon' | 'count';
     /**
-     * Размер компонента (только для view=count)
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
      */
-    size?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
     /**
-     *  Видимость обводки вокруг иконки (только для view=icon)
+     *  Видимость белой обводки вокруг иконки
      */
     visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
     /**
      * Контент компонента
      */
     content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
     /**
      * Цветовое оформление иконки
      */
@@ -30,5 +39,5 @@ type BadgeProps = {
      */
     dataTestId?: string;
 };
-declare const Badge: ({ className, size, view, visibleIconOutline, content, iconColor, dataTestId, }: BadgeProps) => JSX.Element;
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId, }: BadgeProps) => JSX.Element;
 export { BadgeProps, Badge };

package/badge/esm/Component.js

@@ -1,20 +1,58 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"badge__component_8ovou","s":"badge__s_8ovou","m":"badge__m_8ovou","l":"badge__l_8ovou","icon":"badge__icon_8ovou","positive":"badge__positive_8ovou","attention":"badge__attention_8ovou","negative":"badge__negative_8ovou","link":"badge__link_8ovou","tertiary":"badge__tertiary_8ovou","secondary":"badge__secondary_8ovou","primary":"badge__primary_8ovou","outline":"badge__outline_8ovou","dot":"badge__dot_8ovou","isHidden":"badge__isHidden_8ovou"};
+/*! *****************************************************************************
+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);
+};
+
+var styles = {"component":"badge__component_13av5","count":"badge__count_13av5","outlineCount":"badge__outlineCount_13av5","s":"badge__s_13av5","m":"badge__m_13av5","l":"badge__l_13av5","heightS":"badge__heightS_13av5","heightM":"badge__heightM_13av5","heightL":"badge__heightL_13av5","heightXL":"badge__heightXL_13av5","heightXXL":"badge__heightXXL_13av5","wrapper":"badge__wrapper_13av5","xl":"badge__xl_13av5","icon":"badge__icon_13av5","positive":"badge__positive_13av5","attention":"badge__attention_13av5","negative":"badge__negative_13av5","link":"badge__link_13av5","tertiary":"badge__tertiary_13av5","secondary":"badge__secondary_13av5","primary":"badge__primary_13av5","outline":"badge__outline_13av5","outlineColor":"badge__outlineColor_13av5","dot":"badge__dot_13av5","isHidden":"badge__isHidden_13av5"};
 require('./index.css');
 
 var Badge = function (_a) {
-    var _b;
-    var className = _a.className, _c = _a.size, size = _c === void 0 ? 'm' : _c, view = _a.view, _d = _a.visibleIconOutline, visibleIconOutline = _d === void 0 ? false : _d, content = _a.content, iconColor = _a.iconColor, dataTestId = _a.dataTestId;
+    var _b, _c;
+    var className = _a.className, _d = _a.size, size = _d === void 0 ? 'm' : _d, view = _a.view, _e = _a.visibleIconOutline, visibleIconOutline = _e === void 0 ? false : _e, _f = _a.visibleColorOutline, visibleColorOutline = _f === void 0 ? false : _f, content = _a.content, _g = _a.height, height = _g === void 0 ? 16 : _g, iconColor = _a.iconColor, dataTestId = _a.dataTestId;
     var isCountView = view === 'count';
     var isHidden = isCountView && typeof content === 'number' && content <= 0;
     var componentContent = isCountView && content && content >= 100 ? '99+' : content;
-    return (React.createElement("div", { className: cn(styles.component, styles[size], styles[view], iconColor && styles[iconColor], (_b = {},
-            _b[styles.isHidden] = isHidden,
-            _b[styles.dot] = !content,
-            _b[styles.outline] = visibleIconOutline,
-            _b), className), "data-test-id": dataTestId }, componentContent));
+    var isHeightS = isCountView && height >= 16 && height <= 17;
+    var isHeightM = isCountView && height >= 18 && height <= 24;
+    var isHeightL = isCountView && height >= 25 && height <= 32;
+    var isHeightXL = isCountView && height >= 33 && height <= 40;
+    var isHeightXXL = isCountView && height >= 41 && height <= 48;
+    return (React.createElement("div", { className: cn(!isCountView && styles.wrapper, iconColor && styles[iconColor], (_b = {},
+            _b[styles[size]] = !isCountView,
+            _b[styles.outline] = !isCountView && visibleIconOutline,
+            _b[styles.outlineColor] = visibleColorOutline,
+            _b[styles.outlineCount] = isCountView && visibleIconOutline,
+            _b[styles.count] = isCountView,
+            _b)) },
+        React.createElement("div", { className: cn(styles.component, styles[size], styles[view], iconColor && styles[iconColor], isHeightS && styles.heightS, isHeightM && styles.heightM, isHeightL && styles.heightL, isHeightXL && styles.heightXL, isHeightXXL && styles.heightXXL, (_c = {},
+                _c[styles.isHidden] = isHidden,
+                _c[styles.dot] = !content,
+                _c), className), style: __assign({}, (isCountView && content && { height: height, minWidth: height })), "data-test-id": dataTestId }, componentContent)));
 };
 
 export { Badge };

package/badge/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 180e1 */
+/* hash: 19b7h */
 :root {
     --color-light-bg-accent: #ef3124;
     --color-light-bg-primary: #fff;
@@ -21,6 +21,9 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
 }
 :root {
     --border-radius-pill: 99px;
@@ -28,7 +31,7 @@
 :root {
     --badge-icon-bg-color: var(--color-light-bg-primary);
 }
-.badge__component_8ovou {
+.badge__component_13av5 {
     font-size: 12px;
     line-height: 16px;
     font-weight: 700;
@@ -44,72 +47,161 @@
     color: var(--color-light-text-primary-inverted);
     overflow: hidden;
 }
-.badge__s_8ovou {
+.badge__count_13av5 {
+    display: inline-flex;
+    padding: 2px;
+}
+.badge__outlineCount_13av5 {
+    background-color: var(--badge-icon-bg-color);
+    border-radius: 99px;
+}
+.badge__s_13av5 {
     height: 16px;
     min-width: 16px;
     padding: 0 var(--gap-2xs);
 }
-.badge__m_8ovou {
+.badge__m_13av5 {
     height: 20px;
     min-width: 20px;
     padding: 0 6px;
 }
-.badge__l_8ovou {
+.badge__l_13av5 {
     height: 24px;
     min-width: 24px;
     padding: 0 6px;
 }
-.badge__icon_8ovou {
+.badge__heightS_13av5 {
+    padding: 0 var(--gap-2xs);
+}
+.badge__heightM_13av5 {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-2xs);
+}
+.badge__heightL_13av5 {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-xs);
+}
+.badge__heightXL_13av5 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-s);
+}
+.badge__heightXXL_13av5 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-m);
+}
+.badge__wrapper_13av5 {
+    border-radius: 50%
+}
+.badge__wrapper_13av5.badge__s_13av5 {
+        padding: 2px;
+        min-width: 14px;
+        height: 14px;
+    }
+.badge__wrapper_13av5.badge__m_13av5 {
+        padding: 2px;
+        width: 20px;
+        height: 20px;
+    }
+.badge__wrapper_13av5.badge__xl_13av5 {
+        padding: 5px;
+        width: 30px;
+        height: 30px;
+    }
+.badge__icon_13av5 {
     height: auto;
     min-width: 0;
     padding: 0;
-    color: var(--color-light-graphic-positive);
-    background-color: transparent
+    color: var(--color-light-graphic-positive)
 }
-.badge__icon_8ovou.badge__positive_8ovou {
+.badge__icon_13av5.badge__positive_13av5 {
         color: var(--color-light-graphic-positive);
+        background-color: var(--color-light-graphic-positive);
     }
-.badge__icon_8ovou.badge__attention_8ovou {
+.badge__icon_13av5.badge__attention_13av5 {
         color: var(--color-light-graphic-attention);
+        background-color: var(--color-light-graphic-attention);
     }
-.badge__icon_8ovou.badge__negative_8ovou {
+.badge__icon_13av5.badge__negative_13av5 {
         color: var(--color-light-graphic-negative);
+        background-color: var(--color-light-graphic-negative);
     }
-.badge__icon_8ovou.badge__link_8ovou {
+.badge__icon_13av5.badge__link_13av5 {
         color: var(--color-light-graphic-link);
+        background-color: var(--color-light-graphic-link);
     }
-.badge__icon_8ovou.badge__tertiary_8ovou {
+.badge__icon_13av5.badge__tertiary_13av5 {
         color: var(--color-light-graphic-tertiary);
+        background-color: var(--color-light-graphic-tertiary);
     }
-.badge__icon_8ovou.badge__secondary_8ovou {
+.badge__icon_13av5.badge__secondary_13av5 {
         color: var(--color-light-graphic-secondary);
+        background-color: var(--color-light-graphic-secondary);
     }
-.badge__icon_8ovou.badge__primary_8ovou {
+.badge__icon_13av5.badge__primary_13av5 {
         color: var(--color-light-graphic-primary);
+        background-color: var(--color-light-graphic-primary);
     }
-.badge__icon_8ovou:before {
+.badge__icon_13av5.badge__s_13av5 {
+    width: 14px;
+    height: 14px;
+}
+.badge__icon_13av5:before {
     position: absolute;
     z-index: -1;
-    left: 16%;
-    right: 16%;
-    top: 16%;
-    bottom: 16%;
+    left: 18%;
+    right: 18%;
+    top: 18%;
+    bottom: 18%;
     background-color: var(--badge-icon-bg-color);
     border-radius: var(--border-radius-pill);
     content: '';
 }
-.badge__outline_8ovou:before {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+.badge__outline_13av5 {
+    background-color: var(--badge-icon-bg-color);
 }
-.badge__dot_8ovou {
+.badge__outlineColor_13av5.badge__attention_13av5 {
+        background-color: var(--color-light-graphic-attention);
+    }
+.badge__outlineColor_13av5.badge__positive_13av5 {
+        background-color: var(--color-light-graphic-positive);
+    }
+.badge__outlineColor_13av5.badge__negative_13av5 {
+        background-color: var(--color-light-graphic-negative);
+    }
+.badge__outlineColor_13av5.badge__link_13av5 {
+        background-color: var(--color-light-graphic-link);
+    }
+.badge__outlineColor_13av5 .badge__tertiary_13av5 {
+        background-color: var(--color-light-graphic-tertiary);
+    }
+.badge__outlineColor_13av5.badge__secondary_13av5 {
+        background-color: var(--color-light-graphic-secondary);
+    }
+.badge__outlineColor_13av5.badge__primary_13av5 {
+        background-color: var(--color-light-graphic-primary);
+    }
+.badge__dot_13av5 {
     width: 8px;
     height: 8px;
     min-width: 0;
     padding: 0;
 }
-.badge__isHidden_8ovou {
+.badge__isHidden_13av5 {
     display: none;
 }
+.badge__m_13av5 svg {
+    width: 20px;
+    height: 20px;
+}
+.badge__xl_13av5 svg {
+    width: 30px;
+    height: 30px;
+}