@alfalab/core-components 21.3.3 → 22.3.0

package/checkbox-group/esm/index.css

@@ -25,68 +25,68 @@
     --checkbox-group-hint-color: var(--color-light-text-secondary);
     --checkbox-group-label-color: var(--color-light-text-primary);
 }
-.checkbox-group__component_7837a {
+.checkbox-group__component_p33fd {
     display: flex;
     flex-direction: column;
 }
-.checkbox-group__error_7837a {
+.checkbox-group__error_p33fd {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--color-light-text-negative);
 }
-.checkbox-group__checkboxList_7837a {
+.checkbox-group__checkboxList_p33fd {
     display: flex;
 }
-.checkbox-group__vertical_7837a .checkbox-group__checkboxList_7837a {
+.checkbox-group__vertical_p33fd .checkbox-group__checkboxList_p33fd {
     flex-direction: column;
     align-items: flex-start;
 }
-.checkbox-group__vertical_7837a .checkbox-group__checkbox_7837a {
+.checkbox-group__vertical_p33fd .checkbox-group__checkbox_p33fd {
     margin-bottom: var(--gap-m)
 }
-.checkbox-group__vertical_7837a .checkbox-group__checkbox_7837a:last-child {
+.checkbox-group__vertical_p33fd .checkbox-group__checkbox_p33fd:last-child {
         margin-bottom: 0;
     }
-.checkbox-group__horizontal_7837a .checkbox-group__checkboxList_7837a {
+.checkbox-group__horizontal_p33fd .checkbox-group__checkboxList_p33fd {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
 }
-.checkbox-group__tag_7837a.checkbox-group__horizontal_7837a .checkbox-group__checkboxList_7837a {
+.checkbox-group__tag_p33fd.checkbox-group__horizontal_p33fd .checkbox-group__checkboxList_p33fd {
     margin-right: var(--gap-xs-neg);
 }
-.checkbox-group__horizontal_7837a .checkbox-group__checkbox_7837a {
+.checkbox-group__horizontal_p33fd .checkbox-group__checkbox_p33fd {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
 }
-.checkbox-group__horizontal_7837a .checkbox-group__tagLabel_7837a {
+.checkbox-group__horizontal_p33fd .checkbox-group__tagLabel_p33fd {
     margin-right: var(--gap-xs);
 }
-.checkbox-group__label_7837a {
+.checkbox-group__label_p33fd {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--checkbox-group-label-color);
 }
-.checkbox-group__sub_7837a {
+.checkbox-group__sub_p33fd {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
 }
-.checkbox-group__errorMessage_7837a {
+.checkbox-group__errorMessage_p33fd {
     color: var(--checkbox-group-error-color);
 }
-.checkbox-group__hint_7837a {
+.checkbox-group__hint_p33fd {
     color: var(--checkbox-group-hint-color);
 }
-.checkbox-group__hiddenInput_7837a {
+.checkbox-group__hiddenInput_p33fd {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0;
 }
-.checkbox-group__tagLabel_7837a {
+.checkbox-group__tagLabel_p33fd {
     position: relative;
 }

package/checkbox-group/index.css

@@ -25,68 +25,68 @@
     --checkbox-group-hint-color: var(--color-light-text-secondary);
     --checkbox-group-label-color: var(--color-light-text-primary);
 }
-.checkbox-group__component_7837a {
+.checkbox-group__component_p33fd {
     display: flex;
     flex-direction: column;
 }
-.checkbox-group__error_7837a {
+.checkbox-group__error_p33fd {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--color-light-text-negative);
 }
-.checkbox-group__checkboxList_7837a {
+.checkbox-group__checkboxList_p33fd {
     display: flex;
 }
-.checkbox-group__vertical_7837a .checkbox-group__checkboxList_7837a {
+.checkbox-group__vertical_p33fd .checkbox-group__checkboxList_p33fd {
     flex-direction: column;
     align-items: flex-start;
 }
-.checkbox-group__vertical_7837a .checkbox-group__checkbox_7837a {
+.checkbox-group__vertical_p33fd .checkbox-group__checkbox_p33fd {
     margin-bottom: var(--gap-m)
 }
-.checkbox-group__vertical_7837a .checkbox-group__checkbox_7837a:last-child {
+.checkbox-group__vertical_p33fd .checkbox-group__checkbox_p33fd:last-child {
         margin-bottom: 0;
     }
-.checkbox-group__horizontal_7837a .checkbox-group__checkboxList_7837a {
+.checkbox-group__horizontal_p33fd .checkbox-group__checkboxList_p33fd {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
 }
-.checkbox-group__tag_7837a.checkbox-group__horizontal_7837a .checkbox-group__checkboxList_7837a {
+.checkbox-group__tag_p33fd.checkbox-group__horizontal_p33fd .checkbox-group__checkboxList_p33fd {
     margin-right: var(--gap-xs-neg);
 }
-.checkbox-group__horizontal_7837a .checkbox-group__checkbox_7837a {
+.checkbox-group__horizontal_p33fd .checkbox-group__checkbox_p33fd {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
 }
-.checkbox-group__horizontal_7837a .checkbox-group__tagLabel_7837a {
+.checkbox-group__horizontal_p33fd .checkbox-group__tagLabel_p33fd {
     margin-right: var(--gap-xs);
 }
-.checkbox-group__label_7837a {
+.checkbox-group__label_p33fd {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--checkbox-group-label-color);
 }
-.checkbox-group__sub_7837a {
+.checkbox-group__sub_p33fd {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
 }
-.checkbox-group__errorMessage_7837a {
+.checkbox-group__errorMessage_p33fd {
     color: var(--checkbox-group-error-color);
 }
-.checkbox-group__hint_7837a {
+.checkbox-group__hint_p33fd {
     color: var(--checkbox-group-hint-color);
 }
-.checkbox-group__hiddenInput_7837a {
+.checkbox-group__hiddenInput_p33fd {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0;
 }
-.checkbox-group__tagLabel_7837a {
+.checkbox-group__tagLabel_p33fd {
     position: relative;
 }

package/checkbox-group/modern/Component.js

@@ -1,7 +1,7 @@
 import React, { Children, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"checkbox-group__component_7837a","error":"checkbox-group__error_7837a","checkboxList":"checkbox-group__checkboxList_7837a","vertical":"checkbox-group__vertical_7837a","checkbox":"checkbox-group__checkbox_7837a","horizontal":"checkbox-group__horizontal_7837a","tag":"checkbox-group__tag_7837a","tagLabel":"checkbox-group__tagLabel_7837a","label":"checkbox-group__label_7837a","sub":"checkbox-group__sub_7837a","errorMessage":"checkbox-group__errorMessage_7837a","hint":"checkbox-group__hint_7837a","hiddenInput":"checkbox-group__hiddenInput_7837a"};
+var styles = {"component":"checkbox-group__component_p33fd","error":"checkbox-group__error_p33fd","checkboxList":"checkbox-group__checkboxList_p33fd","vertical":"checkbox-group__vertical_p33fd","checkbox":"checkbox-group__checkbox_p33fd","horizontal":"checkbox-group__horizontal_p33fd","tag":"checkbox-group__tag_p33fd","tagLabel":"checkbox-group__tagLabel_p33fd","label":"checkbox-group__label_p33fd","sub":"checkbox-group__sub_p33fd","errorMessage":"checkbox-group__errorMessage_p33fd","hint":"checkbox-group__hint_p33fd","hiddenInput":"checkbox-group__hiddenInput_p33fd"};
 require('./index.css');
 
 const CheckboxGroup = ({ children, className, direction = 'vertical', label, error, hint, onChange, type = 'checkbox', dataTestId, disabled = false, }) => {

package/checkbox-group/modern/index.css

@@ -25,68 +25,68 @@
     --checkbox-group-hint-color: var(--color-light-text-secondary);
     --checkbox-group-label-color: var(--color-light-text-primary);
 }
-.checkbox-group__component_7837a {
+.checkbox-group__component_p33fd {
     display: flex;
     flex-direction: column;
 }
-.checkbox-group__error_7837a {
+.checkbox-group__error_p33fd {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--color-light-text-negative);
 }
-.checkbox-group__checkboxList_7837a {
+.checkbox-group__checkboxList_p33fd {
     display: flex;
 }
-.checkbox-group__vertical_7837a .checkbox-group__checkboxList_7837a {
+.checkbox-group__vertical_p33fd .checkbox-group__checkboxList_p33fd {
     flex-direction: column;
     align-items: flex-start;
 }
-.checkbox-group__vertical_7837a .checkbox-group__checkbox_7837a {
+.checkbox-group__vertical_p33fd .checkbox-group__checkbox_p33fd {
     margin-bottom: var(--gap-m)
 }
-.checkbox-group__vertical_7837a .checkbox-group__checkbox_7837a:last-child {
+.checkbox-group__vertical_p33fd .checkbox-group__checkbox_p33fd:last-child {
         margin-bottom: 0;
     }
-.checkbox-group__horizontal_7837a .checkbox-group__checkboxList_7837a {
+.checkbox-group__horizontal_p33fd .checkbox-group__checkboxList_p33fd {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
 }
-.checkbox-group__tag_7837a.checkbox-group__horizontal_7837a .checkbox-group__checkboxList_7837a {
+.checkbox-group__tag_p33fd.checkbox-group__horizontal_p33fd .checkbox-group__checkboxList_p33fd {
     margin-right: var(--gap-xs-neg);
 }
-.checkbox-group__horizontal_7837a .checkbox-group__checkbox_7837a {
+.checkbox-group__horizontal_p33fd .checkbox-group__checkbox_p33fd {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
 }
-.checkbox-group__horizontal_7837a .checkbox-group__tagLabel_7837a {
+.checkbox-group__horizontal_p33fd .checkbox-group__tagLabel_p33fd {
     margin-right: var(--gap-xs);
 }
-.checkbox-group__label_7837a {
+.checkbox-group__label_p33fd {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--checkbox-group-label-color);
 }
-.checkbox-group__sub_7837a {
+.checkbox-group__sub_p33fd {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
 }
-.checkbox-group__errorMessage_7837a {
+.checkbox-group__errorMessage_p33fd {
     color: var(--checkbox-group-error-color);
 }
-.checkbox-group__hint_7837a {
+.checkbox-group__hint_p33fd {
     color: var(--checkbox-group-hint-color);
 }
-.checkbox-group__hiddenInput_7837a {
+.checkbox-group__hiddenInput_p33fd {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0;
 }
-.checkbox-group__tagLabel_7837a {
+.checkbox-group__tagLabel_p33fd {
     position: relative;
 }

package/circular-progress-bar/Component.d.ts

@@ -22,9 +22,9 @@ type CircularProgressBarProps = {
      */
     view?: 'positive' | 'negative';
     /**
-     * Размер (l - 144x144px, m - 120x120px)
+     * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
      */
-    size?: 'l' | 'm';
+    size?: 'l' | 'm' | 's';
     /**
      * Id компонента для тестов
      */

package/circular-progress-bar/Component.js

@@ -9,9 +9,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"component":"circular-progress-bar__component_12475","svg":"circular-progress-bar__svg_12475","title":"circular-progress-bar__title_12475","subtitle":"circular-progress-bar__subtitle_12475","l":"circular-progress-bar__l_12475","label":"circular-progress-bar__label_12475","m":"circular-progress-bar__m_12475","backgroundCircle":"circular-progress-bar__backgroundCircle_12475","progressCircle":"circular-progress-bar__progressCircle_12475","positive":"circular-progress-bar__positive_12475","negative":"circular-progress-bar__negative_12475"};
+var styles = {"component":"circular-progress-bar__component_1jumc","svg":"circular-progress-bar__svg_1jumc","title":"circular-progress-bar__title_1jumc","subtitle":"circular-progress-bar__subtitle_1jumc","l":"circular-progress-bar__l_1jumc","label":"circular-progress-bar__label_1jumc","m":"circular-progress-bar__m_1jumc","s":"circular-progress-bar__s_1jumc","backgroundCircle":"circular-progress-bar__backgroundCircle_1jumc","progressCircle":"circular-progress-bar__progressCircle_1jumc","positive":"circular-progress-bar__positive_1jumc","negative":"circular-progress-bar__negative_1jumc"};
 require('./index.css');
 
+var SIZES = {
+    s: 96,
+    m: 120,
+    l: 144,
+};
 /**
  * Компонент круглого прогресс бара.
  */
@@ -21,8 +26,8 @@ var CircularProgressBar = function (_a) {
         var strokeWidth = 8;
         var maxProgress = 100;
         var minProgress = 0;
-        var width = size === 'l' ? 144 : 120;
-        var height = size === 'l' ? 144 : 120;
+        var width = SIZES[size];
+        var height = SIZES[size];
         var center = width / 2;
         var radius = center - strokeWidth / 2;
         var circumference = Math.PI * radius * 2;

package/circular-progress-bar/cssm/Component.d.ts

@@ -22,9 +22,9 @@ type CircularProgressBarProps = {
      */
     view?: 'positive' | 'negative';
     /**
-     * Размер (l - 144x144px, m - 120x120px)
+     * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
      */
-    size?: 'l' | 'm';
+    size?: 'l' | 'm' | 's';
     /**
      * Id компонента для тестов
      */

package/circular-progress-bar/cssm/Component.js

@@ -11,6 +11,11 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
+var SIZES = {
+    s: 96,
+    m: 120,
+    l: 144,
+};
 /**
  * Компонент круглого прогресс бара.
  */
@@ -20,8 +25,8 @@ var CircularProgressBar = function (_a) {
         var strokeWidth = 8;
         var maxProgress = 100;
         var minProgress = 0;
-        var width = size === 'l' ? 144 : 120;
-        var height = size === 'l' ? 144 : 120;
+        var width = SIZES[size];
+        var height = SIZES[size];
         var center = width / 2;
         var radius = center - strokeWidth / 2;
         var circumference = Math.PI * radius * 2;

package/circular-progress-bar/cssm/index.module.css

@@ -63,6 +63,19 @@
         max-height: 24px;
     }
 
+.s {
+    width: 96px;
+    height: 96px
+}
+
+.s .label {
+        max-width: 72px;
+    }
+
+.s .title {
+        max-height: 24px;
+    }
+
 .label {
     text-align: center;
     position: absolute;

package/circular-progress-bar/esm/Component.d.ts

@@ -22,9 +22,9 @@ type CircularProgressBarProps = {
      */
     view?: 'positive' | 'negative';
     /**
-     * Размер (l - 144x144px, m - 120x120px)
+     * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
      */
-    size?: 'l' | 'm';
+    size?: 'l' | 'm' | 's';
     /**
      * Id компонента для тестов
      */

package/circular-progress-bar/esm/Component.js

@@ -2,9 +2,14 @@ import cn from 'classnames';
 import React, { useMemo } from 'react';
 import { Typography } from '../../typography/esm';
 
-var styles = {"component":"circular-progress-bar__component_12475","svg":"circular-progress-bar__svg_12475","title":"circular-progress-bar__title_12475","subtitle":"circular-progress-bar__subtitle_12475","l":"circular-progress-bar__l_12475","label":"circular-progress-bar__label_12475","m":"circular-progress-bar__m_12475","backgroundCircle":"circular-progress-bar__backgroundCircle_12475","progressCircle":"circular-progress-bar__progressCircle_12475","positive":"circular-progress-bar__positive_12475","negative":"circular-progress-bar__negative_12475"};
+var styles = {"component":"circular-progress-bar__component_1jumc","svg":"circular-progress-bar__svg_1jumc","title":"circular-progress-bar__title_1jumc","subtitle":"circular-progress-bar__subtitle_1jumc","l":"circular-progress-bar__l_1jumc","label":"circular-progress-bar__label_1jumc","m":"circular-progress-bar__m_1jumc","s":"circular-progress-bar__s_1jumc","backgroundCircle":"circular-progress-bar__backgroundCircle_1jumc","progressCircle":"circular-progress-bar__progressCircle_1jumc","positive":"circular-progress-bar__positive_1jumc","negative":"circular-progress-bar__negative_1jumc"};
 require('./index.css');
 
+var SIZES = {
+    s: 96,
+    m: 120,
+    l: 144,
+};
 /**
  * Компонент круглого прогресс бара.
  */
@@ -14,8 +19,8 @@ var CircularProgressBar = function (_a) {
         var strokeWidth = 8;
         var maxProgress = 100;
         var minProgress = 0;
-        var width = size === 'l' ? 144 : 120;
-        var height = size === 'l' ? 144 : 120;
+        var width = SIZES[size];
+        var height = SIZES[size];
         var center = width / 2;
         var radius = center - strokeWidth / 2;
         var circumference = Math.PI * radius * 2;

package/circular-progress-bar/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: tdnhd */
+/* hash: kqboq */
 :root {
     --color-light-bg-tertiary: #e7e9eb;
     --color-light-graphic-negative: #f15045;
@@ -16,55 +16,68 @@
     --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
 }
 
-.circular-progress-bar__component_12475 {
+.circular-progress-bar__component_1jumc {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.circular-progress-bar__svg_12475 {
+.circular-progress-bar__svg_1jumc {
     display: block;
     width: 100%;
 }
 
-.circular-progress-bar__title_12475,
-.circular-progress-bar__subtitle_12475 {
+.circular-progress-bar__title_1jumc,
+.circular-progress-bar__subtitle_1jumc {
     overflow: hidden;
     word-break: break-word;
 }
 
-.circular-progress-bar__subtitle_12475 {
+.circular-progress-bar__subtitle_1jumc {
     max-height: 40px;
 }
 
-.circular-progress-bar__l_12475 {
+.circular-progress-bar__l_1jumc {
     width: 144px;
     height: 144px
 }
 
-.circular-progress-bar__l_12475 .circular-progress-bar__label_12475 {
+.circular-progress-bar__l_1jumc .circular-progress-bar__label_1jumc {
         max-width: 120px;
     }
 
-.circular-progress-bar__l_12475 .circular-progress-bar__title_12475 {
+.circular-progress-bar__l_1jumc .circular-progress-bar__title_1jumc {
         max-height: 32px;
     }
 
-.circular-progress-bar__m_12475 {
+.circular-progress-bar__m_1jumc {
     width: 120px;
     height: 120px
 }
 
-.circular-progress-bar__m_12475 .circular-progress-bar__label_12475 {
+.circular-progress-bar__m_1jumc .circular-progress-bar__label_1jumc {
         max-width: 96px;
     }
 
-.circular-progress-bar__m_12475 .circular-progress-bar__title_12475 {
+.circular-progress-bar__m_1jumc .circular-progress-bar__title_1jumc {
         max-height: 24px;
     }
 
-.circular-progress-bar__label_12475 {
+.circular-progress-bar__s_1jumc {
+    width: 96px;
+    height: 96px
+}
+
+.circular-progress-bar__s_1jumc .circular-progress-bar__label_1jumc {
+        max-width: 72px;
+    }
+
+.circular-progress-bar__s_1jumc .circular-progress-bar__title_1jumc {
+        max-height: 24px;
+    }
+
+.circular-progress-bar__label_1jumc {
     text-align: center;
     position: absolute;
     top: 50%;
@@ -73,22 +86,22 @@
     transform: translate(-50%, -50%);
 }
 
-.circular-progress-bar__backgroundCircle_12475,
-.circular-progress-bar__progressCircle_12475 {
+.circular-progress-bar__backgroundCircle_1jumc,
+.circular-progress-bar__progressCircle_1jumc {
     width: 100%;
     height: 100%;
     fill: transparent;
     stroke-width: 8;
 }
 
-.circular-progress-bar__positive_12475 {
+.circular-progress-bar__positive_1jumc {
     stroke: var(--circular-progress-bar-positive-color);
 }
 
-.circular-progress-bar__negative_12475 {
+.circular-progress-bar__negative_1jumc {
     stroke: var(--circular-progress-bar-negative-color);
 }
 
-.circular-progress-bar__backgroundCircle_12475 {
+.circular-progress-bar__backgroundCircle_1jumc {
     stroke: var(--circular-progress-bar-bg-color);
 }

package/circular-progress-bar/index.css

@@ -1,4 +1,4 @@
-/* hash: tdnhd */
+/* hash: kqboq */
 :root {
     --color-light-bg-tertiary: #e7e9eb;
     --color-light-graphic-negative: #f15045;
@@ -16,55 +16,68 @@
     --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
 }
 
-.circular-progress-bar__component_12475 {
+.circular-progress-bar__component_1jumc {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.circular-progress-bar__svg_12475 {
+.circular-progress-bar__svg_1jumc {
     display: block;
     width: 100%;
 }
 
-.circular-progress-bar__title_12475,
-.circular-progress-bar__subtitle_12475 {
+.circular-progress-bar__title_1jumc,
+.circular-progress-bar__subtitle_1jumc {
     overflow: hidden;
     word-break: break-word;
 }
 
-.circular-progress-bar__subtitle_12475 {
+.circular-progress-bar__subtitle_1jumc {
     max-height: 40px;
 }
 
-.circular-progress-bar__l_12475 {
+.circular-progress-bar__l_1jumc {
     width: 144px;
     height: 144px
 }
 
-.circular-progress-bar__l_12475 .circular-progress-bar__label_12475 {
+.circular-progress-bar__l_1jumc .circular-progress-bar__label_1jumc {
         max-width: 120px;
     }
 
-.circular-progress-bar__l_12475 .circular-progress-bar__title_12475 {
+.circular-progress-bar__l_1jumc .circular-progress-bar__title_1jumc {
         max-height: 32px;
     }
 
-.circular-progress-bar__m_12475 {
+.circular-progress-bar__m_1jumc {
     width: 120px;
     height: 120px
 }
 
-.circular-progress-bar__m_12475 .circular-progress-bar__label_12475 {
+.circular-progress-bar__m_1jumc .circular-progress-bar__label_1jumc {
         max-width: 96px;
     }
 
-.circular-progress-bar__m_12475 .circular-progress-bar__title_12475 {
+.circular-progress-bar__m_1jumc .circular-progress-bar__title_1jumc {
         max-height: 24px;
     }
 
-.circular-progress-bar__label_12475 {
+.circular-progress-bar__s_1jumc {
+    width: 96px;
+    height: 96px
+}
+
+.circular-progress-bar__s_1jumc .circular-progress-bar__label_1jumc {
+        max-width: 72px;
+    }
+
+.circular-progress-bar__s_1jumc .circular-progress-bar__title_1jumc {
+        max-height: 24px;
+    }
+
+.circular-progress-bar__label_1jumc {
     text-align: center;
     position: absolute;
     top: 50%;
@@ -73,22 +86,22 @@
     transform: translate(-50%, -50%);
 }
 
-.circular-progress-bar__backgroundCircle_12475,
-.circular-progress-bar__progressCircle_12475 {
+.circular-progress-bar__backgroundCircle_1jumc,
+.circular-progress-bar__progressCircle_1jumc {
     width: 100%;
     height: 100%;
     fill: transparent;
     stroke-width: 8;
 }
 
-.circular-progress-bar__positive_12475 {
+.circular-progress-bar__positive_1jumc {
     stroke: var(--circular-progress-bar-positive-color);
 }
 
-.circular-progress-bar__negative_12475 {
+.circular-progress-bar__negative_1jumc {
     stroke: var(--circular-progress-bar-negative-color);
 }
 
-.circular-progress-bar__backgroundCircle_12475 {
+.circular-progress-bar__backgroundCircle_1jumc {
     stroke: var(--circular-progress-bar-bg-color);
 }

package/circular-progress-bar/modern/Component.d.ts

@@ -22,9 +22,9 @@ type CircularProgressBarProps = {
      */
     view?: 'positive' | 'negative';
     /**
-     * Размер (l - 144x144px, m - 120x120px)
+     * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
      */
-    size?: 'l' | 'm';
+    size?: 'l' | 'm' | 's';
     /**
      * Id компонента для тестов
      */