mimir-ui-kit 1.18.0 → 1.19.0

package/README.md

@@ -1,62 +1,62 @@
-# Mimir-ui
-
-## Установка и запуск проекта
-
-1. Установите зависимости:
-   ```bash
-   npm install
-   ```
-2. Запуск storybook
-   ```bash
-   npm run storybook
-   ```
-
-## Сборка проекта
-
-1. Скрипт для сборки
-   ```bash
-   npm run build
-   ```
-
-## Создание нового компонента
-
-```bash
-npm run create-component <ComponentName>
-```
-
-## Поднятие версии для публикации на npm
-
-Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
-
-1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
-
-```bash
-npm version patch
-```
-
-2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
-   ```bash
-   npm version minor
-   ```
-3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
-   ```bash
-   npm version major
-   ```
-
-## Публикация на npm
-
-1. Скрипт для публикации на npm:
-   ```bash
-   npm publish
-   ```
-
-## Ручная Генерация иконок
-
-1. Экспортируем с фигмы иконку.
-2. Добавляем ее в папку svgs.
-3. Запускаем скрипт:
-   ```bash
-   npm run icons
-   ```
-4. Смотрим в папку `icons/components`
-5. Готово.
+# Mimir-ui
+
+## Установка и запуск проекта
+
+1. Установите зависимости:
+   ```bash
+   npm install
+   ```
+2. Запуск storybook
+   ```bash
+   npm run storybook
+   ```
+
+## Сборка проекта
+
+1. Скрипт для сборки
+   ```bash
+   npm run build
+   ```
+
+## Создание нового компонента
+
+```bash
+npm run create-component <ComponentName>
+```
+
+## Поднятие версии для публикации на npm
+
+Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
+
+1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
+
+```bash
+npm version patch
+```
+
+2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
+   ```bash
+   npm version minor
+   ```
+3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
+   ```bash
+   npm version major
+   ```
+
+## Публикация на npm
+
+1. Скрипт для публикации на npm:
+   ```bash
+   npm publish
+   ```
+
+## Ручная Генерация иконок
+
+1. Экспортируем с фигмы иконку.
+2. Добавляем ее в папку svgs.
+3. Запускаем скрипт:
+   ```bash
+   npm run icons
+   ```
+4. Смотрим в папку `icons/components`
+5. Готово.

package/dist/assets/Steps.css

@@ -1 +1 @@
-._container_j31xr_2{display:flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}._container_j31xr_2 ._step_j31xr_6{pointer-events:none}._container_j31xr_2 ._step_j31xr_6._editable_j31xr_9{pointer-events:all}._container_j31xr_2 ._step_j31xr_6._PRIMARY_j31xr_12._GRAY_j31xr_12{color:var(--black-60)}._container_j31xr_2 ._step_j31xr_6._PRIMARY_j31xr_12._CITRINE_j31xr_15{color:var(--citrine-100)}._container_j31xr_2 ._step_j31xr_6._PRIMARY_j31xr_12._SAPPHIRE_j31xr_18{color:var(--sapphire-normal)}._container_j31xr_2 ._step_j31xr_6._SECONDARY_j31xr_21._WHITE_j31xr_21{color:var(--white)}._container_j31xr_2 ._step_j31xr_6._SECONDARY_j31xr_21._LIGHT_SAPPHIRE_j31xr_24{color:var(--sapphire-10)}._container_j31xr_2 ._step_j31xr_6._SECONDARY_j31xr_21._LIGHT_GRAY_j31xr_27,._container_j31xr_2 ._step_j31xr_6._SECONDARY_j31xr_21._disabled_j31xr_27{color:var(--disabled)}
+._container_1qg9i_2{display:flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}._container_1qg9i_2 ._step_1qg9i_6{pointer-events:none}._container_1qg9i_2 ._step_1qg9i_6._editable_1qg9i_9{pointer-events:all}

package/dist/assets/Vote.css

@@ -1 +1 @@
-._container_4roqw_2{display:flex;flex-direction:column;gap:var(--space-m);align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}._container_4roqw_2 ._title_4roqw_9{color:var(--black-100);font-weight:var(--font-weight-text-medium);font-size:var(--size-text-l);font-family:var(--font-inter);line-height:var(--line-height-text-s1)}._container_4roqw_2 ._score_4roqw_16{display:flex;align-items:center;justify-content:center;width:50px;height:50px;color:var(--white);font-weight:var(--font-weight-text-medium);font-size:var(--size-text-2xl);font-family:Montserrat,sans-serif;letter-spacing:-.03em;border-radius:50%}._container_4roqw_2 ._score_4roqw_16._zero_4roqw_29._LIGHT_GRAY_4roqw_29{background-color:var(--disabled)}._container_4roqw_2 ._score_4roqw_16._zero_4roqw_29._WHITE_4roqw_32{color:var(--disabled);background-color:var(--white)}._container_4roqw_2 ._score_4roqw_16._zero_4roqw_29._LIGHT_SAPPHIRE_4roqw_36{background-color:var(--sapphire-10)}._container_4roqw_2._GRAY_4roqw_39 ._score_4roqw_16{background-color:var(--black-60)}._container_4roqw_2._CITRINE_4roqw_42 ._score_4roqw_16{background-color:var(--citrine-100)}._container_4roqw_2._SAPPHIRE_4roqw_45 ._score_4roqw_16{background-color:var(--sapphire-normal)}
+._container_1akd9_2{display:flex;flex-direction:column;gap:var(--space-m);align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}._container_1akd9_2 ._title_1akd9_9{color:var(--black-100);font-weight:var(--font-weight-text-medium);font-size:var(--size-text-l);font-family:var(--font-inter),sans-serif;line-height:var(--line-height-text-s1)}._container_1akd9_2 ._score_1akd9_16{display:flex;align-items:center;justify-content:center;width:50px;height:50px;color:var(--white);font-weight:var(--font-weight-text-medium);font-size:var(--size-text-2xl);font-family:var(--font-montserrat),sans-serif;letter-spacing:-.03em;border-radius:50%}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,23 @@
+export type TProps = {
+    /**
+     * Класс, применяемый к корневому элемент
+     */
+    rootClassName?: string;
+    /**
+     * Текст метки для чекбокса
+     */
+    label: string;
+    /**
+     * Состояние выбранности чекбокса
+     */
+    checked?: boolean;
+    /**
+     * Обработчик изменения состояния чекбокса
+     */
+    onChange: () => void;
+    /**
+     * Название поля чекбокса
+     */
+    name: string;
+};
+export declare const Checkbox: import('react').ForwardRefExoticComponent<TProps & import('react').RefAttributes<HTMLLabelElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef } from "react";
+import '../../assets/Checkbox.css';const cls = {};
+const Checkbox = forwardRef(
+  (props, ref) => {
+    const { rootClassName, label, checked, onChange, name } = props;
+    return /* @__PURE__ */ jsxs("label", { className: classNames(cls.container, rootClassName), ref, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked,
+          onChange,
+          name
+        }
+      ),
+      label
+    ] });
+  }
+);
+export {
+  Checkbox
+};

package/dist/components/Checkbox/constants.js

@@ -0,0 +1 @@
+

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

package/dist/components/Checkbox/index.js

@@ -0,0 +1,4 @@
+import { Checkbox } from "./Checkbox.js";
+export {
+  Checkbox
+};

package/dist/components/Checkbox/types.js

@@ -0,0 +1 @@
+

package/dist/components/Steps/Steps.d.ts

@@ -1,5 +1,5 @@
-import { EStepsPrimaryColor, EStepsSecondaryColor } from './constants';
 import { TCommonStepsProps } from './types';
+import { TStepsZone } from './types.ts';
 
 export type TProps = TCommonStepsProps & {
     /**
@@ -31,13 +31,13 @@ export type TProps = TCommonStepsProps & {
      */
     disabled?: boolean;
     /**
-     * Цвет пройденных шагов
+     * Цвет оставшихся шагов
      */
-    primaryColor?: EStepsPrimaryColor;
+    zones?: TStepsZone[];
     /**
-     * Цвет оставшихся шагов
+     * Цвет шага, если он не выбран
      */
-    secondaryColor?: EStepsSecondaryColor;
+    unselectedColor?: string;
 };
 export declare const Steps: import('react').ForwardRefExoticComponent<TCommonStepsProps & {
     /**
@@ -69,11 +69,11 @@ export declare const Steps: import('react').ForwardRefExoticComponent<TCommonSte
      */
     disabled?: boolean;
     /**
-     * Цвет пройденных шагов
+     * Цвет оставшихся шагов
      */
-    primaryColor?: EStepsPrimaryColor;
+    zones?: TStepsZone[];
     /**
-     * Цвет оставшихся шагов
+     * Цвет шага, если он не выбран
      */
-    secondaryColor?: EStepsSecondaryColor;
+    unselectedColor?: string;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Steps/Steps.js

@@ -1,33 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import { forwardRef, useId, useState, useRef, useEffect } from "react";
-import { ZERO_STEP, EStepsSize, EStepsPrimaryColor, ID_SEPARATOR, EStepsColorType, StepSize, DIFF_BETWEEN_STEP_AND_INDEX } from "./constants.js";
+import { ZERO_STEP, EStepsSize, ID_SEPARATOR, StepSize, DIFF_BETWEEN_STEP_AND_INDEX } from "./constants.js";
 import { Icon } from "../../icons/Icon.js";
-import '../../assets/Steps.css';const container = "_container_j31xr_2";
-const step = "_step_j31xr_6";
-const editable = "_editable_j31xr_9";
-const PRIMARY = "_PRIMARY_j31xr_12";
-const GRAY = "_GRAY_j31xr_12";
-const CITRINE = "_CITRINE_j31xr_15";
-const SAPPHIRE = "_SAPPHIRE_j31xr_18";
-const SECONDARY = "_SECONDARY_j31xr_21";
-const WHITE = "_WHITE_j31xr_21";
-const LIGHT_SAPPHIRE = "_LIGHT_SAPPHIRE_j31xr_24";
-const LIGHT_GRAY = "_LIGHT_GRAY_j31xr_27";
-const disabled = "_disabled_j31xr_27";
+import '../../assets/Steps.css';const container = "_container_1qg9i_2";
+const step = "_step_1qg9i_6";
+const editable = "_editable_1qg9i_9";
 const cls = {
   container,
   step,
-  editable,
-  PRIMARY,
-  GRAY,
-  CITRINE,
-  SAPPHIRE,
-  SECONDARY,
-  WHITE,
-  LIGHT_SAPPHIRE,
-  LIGHT_GRAY,
-  disabled
+  editable
 };
 const Steps = forwardRef(
   (props, ref) => {
@@ -39,9 +21,9 @@ const Steps = forwardRef(
       editable: editable2 = false,
       size = EStepsSize.M,
       onClick,
-      disabled: disabled2 = false,
-      primaryColor = EStepsPrimaryColor.CITRINE,
-      secondaryColor = EStepsPrimaryColor.GRAY
+      disabled = false,
+      zones = [{ color: "#ff0000", to: quantity }],
+      unselectedColor = "#ffffff"
     } = props;
     const idPrefix = useId();
     const [step2, setStep] = useState(current);
@@ -69,23 +51,24 @@ const Steps = forwardRef(
       setHoveredStep(null);
     };
     const buttons = Array.from({ length: quantity }, (_, idx) => {
-      const isPrimary = idx + DIFF_BETWEEN_STEP_AND_INDEX <= (hoveredStep !== null ? hoveredStep + DIFF_BETWEEN_STEP_AND_INDEX : step2);
-      const isSecondary = idx + DIFF_BETWEEN_STEP_AND_INDEX > (hoveredStep !== null ? hoveredStep + DIFF_BETWEEN_STEP_AND_INDEX : step2);
+      var _a, _b;
+      let currentZone = 0;
+      while (currentZone < zones.length && zones[currentZone].to <= idx) {
+        currentZone++;
+      }
+      const color = hoveredStep !== null && idx <= hoveredStep ? (_a = zones[currentZone]) == null ? void 0 : _a.color : step2 > idx && hoveredStep === null ? (_b = zones[currentZone]) == null ? void 0 : _b.color : unselectedColor;
       return /* @__PURE__ */ jsx(
         "button",
         {
           id: `${idPrefix}${ID_SEPARATOR}${idx}`,
           className: classNames(cls.step, cls[size], stepClassName, {
-            [cls.editable]: editable2 && !disabled2,
-            [cls.disabled]: disabled2 || !editable2 && idx + 1 > step2,
-            [cls[EStepsColorType.PRIMARY]]: isPrimary,
-            [cls[EStepsColorType.SECONDARY]]: isSecondary,
-            [cls[primaryColor]]: isPrimary,
-            [cls[secondaryColor]]: isSecondary
+            [cls.editable]: editable2 && !disabled,
+            [cls.disabled]: disabled || !editable2 && idx + 1 > step2
           }),
           onClick: () => handleClick(idx),
           onMouseEnter: handleMouseEnter,
           onMouseLeave: handleMouseLeave,
+          style: { color },
           children: /* @__PURE__ */ jsx(Icon, { iconName: "Step", ...StepSize[size] })
         },
         idx
@@ -94,6 +77,7 @@ const Steps = forwardRef(
     return /* @__PURE__ */ jsx("div", { className: classNames(cls.container, rootClassName), ref, children: buttons });
   }
 );
+Steps.displayName = "Steps";
 export {
   Steps
 };

package/dist/components/Steps/constants.d.ts

@@ -25,17 +25,10 @@ export declare const StepSize: {
         height: number;
     };
 };
-export declare enum EStepsColorType {
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY"
-}
-export declare enum EStepsPrimaryColor {
-    GRAY = "GRAY",
-    CITRINE = "CITRINE",
-    SAPPHIRE = "SAPPHIRE"
-}
-export declare enum EStepsSecondaryColor {
-    LIGHT_GRAY = "LIGHT_GRAY",
-    LIGHT_SAPPHIRE = "LIGHT_SAPPHIRE",
-    WHITE = "WHITE"
+export declare enum EStepColor {
+    ASPHALT = "#333333",
+    CITRINE = "#ff7900",
+    SAPPHIRE = "#2355d7",
+    GREEN = "#1b770c",
+    DISABLED = "#b2b2b2"
 }

package/dist/components/Steps/constants.js

@@ -26,28 +26,17 @@ const StepSize = {
     height: 28
   }
 };
-var EStepsColorType = /* @__PURE__ */ ((EStepsColorType2) => {
-  EStepsColorType2["PRIMARY"] = "PRIMARY";
-  EStepsColorType2["SECONDARY"] = "SECONDARY";
-  return EStepsColorType2;
-})(EStepsColorType || {});
-var EStepsPrimaryColor = /* @__PURE__ */ ((EStepsPrimaryColor2) => {
-  EStepsPrimaryColor2["GRAY"] = "GRAY";
-  EStepsPrimaryColor2["CITRINE"] = "CITRINE";
-  EStepsPrimaryColor2["SAPPHIRE"] = "SAPPHIRE";
-  return EStepsPrimaryColor2;
-})(EStepsPrimaryColor || {});
-var EStepsSecondaryColor = /* @__PURE__ */ ((EStepsSecondaryColor2) => {
-  EStepsSecondaryColor2["LIGHT_GRAY"] = "LIGHT_GRAY";
-  EStepsSecondaryColor2["LIGHT_SAPPHIRE"] = "LIGHT_SAPPHIRE";
-  EStepsSecondaryColor2["WHITE"] = "WHITE";
-  return EStepsSecondaryColor2;
-})(EStepsSecondaryColor || {});
+var EStepColor = /* @__PURE__ */ ((EStepColor2) => {
+  EStepColor2["ASPHALT"] = "#333333";
+  EStepColor2["CITRINE"] = "#ff7900";
+  EStepColor2["SAPPHIRE"] = "#2355d7";
+  EStepColor2["GREEN"] = "#1b770c";
+  EStepColor2["DISABLED"] = "#b2b2b2";
+  return EStepColor2;
+})(EStepColor || {});
 export {
   DIFF_BETWEEN_STEP_AND_INDEX,
-  EStepsColorType,
-  EStepsPrimaryColor,
-  EStepsSecondaryColor,
+  EStepColor,
   EStepsSize,
   ID_SEPARATOR,
   StepSize,

package/dist/components/Steps/index.d.ts

@@ -1,3 +1,3 @@
 export { Steps } from './Steps';
-export { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from './constants';
-export type { TCommonStepsProps } from './types';
+export { EStepColor, EStepsSize } from './constants';
+export type { TCommonStepsProps, TStepsZone } from './types';

package/dist/components/Steps/index.js

@@ -1,8 +1,7 @@
 import { Steps } from "./Steps.js";
-import { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from "./constants.js";
+import { EStepColor, EStepsSize } from "./constants.js";
 export {
-  EStepsPrimaryColor,
-  EStepsSecondaryColor,
+  EStepColor,
   EStepsSize,
   Steps
 };

package/dist/components/Steps/types.d.ts

@@ -1,6 +1,10 @@
-import { EStepsSize } from './constants';
+import { EStepColor, EStepsSize } from './constants';
 
 export type TSize = `${EStepsSize}` | EStepsSize;
 export type TCommonStepsProps = {
     size?: TSize;
 };
+export type TStepsZone = {
+    color: EStepColor | string;
+    to: number;
+};

package/dist/components/Vote/Vote.d.ts

@@ -1,5 +1,5 @@
 import { TCommonVoteProps } from './types';
-import { EStepsPrimaryColor, EStepsSecondaryColor } from '../Steps/constants';
+import { TStepsZone } from '../Steps/types.ts';
 
 export type TProps = TCommonVoteProps & {
     /**
@@ -47,17 +47,20 @@ export type TProps = TCommonVoteProps & {
      */
     disabled?: boolean;
     /**
-     * Цвет пройденных шагов
+     * Зоны для рахделения шагов по цветам
      */
-    primaryColor?: EStepsPrimaryColor;
+    zones?: TStepsZone[];
     /**
-     * Цвет оставшихся шагов
+     * Цвет круга шага с баллом, если оценка не установлена и шага, если он не выбран
      */
-    secondaryColor?: EStepsSecondaryColor;
+    unselectedColor?: string;
     /**
-     * Флаг, говорящий нужно ли менять цвет выбранных шагов, если оценка меньше 50%
+     * Цвет текста в круге с баллом
      */
-    needChangeFirstHalfColor?: boolean;
+    scoreTextColor?: {
+        unselected: string;
+        selected: string;
+    };
 };
 export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVoteProps & {
     /**
@@ -105,15 +108,18 @@ export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVote
      */
     disabled?: boolean;
     /**
-     * Цвет пройденных шагов
+     * Зоны для рахделения шагов по цветам
      */
-    primaryColor?: EStepsPrimaryColor;
+    zones?: TStepsZone[];
     /**
-     * Цвет оставшихся шагов
+     * Цвет круга шага с баллом, если оценка не установлена и шага, если он не выбран
      */
-    secondaryColor?: EStepsSecondaryColor;
+    unselectedColor?: string;
     /**
-     * Флаг, говорящий нужно ли менять цвет выбранных шагов, если оценка меньше 50%
+     * Цвет текста в круге с баллом
      */
-    needChangeFirstHalfColor?: boolean;
+    scoreTextColor?: {
+        unselected: string;
+        selected: string;
+    };
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Vote/Vote.js

@@ -1,32 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import { forwardRef, useState, useEffect } from "react";
-import { DEFAULT_TITLE, EVoteSize, SCORE_TO_QUANTITY_THRESHOLD, ZERO_VALUE } from "./constants.js";
-import { ZERO_STEP, EStepsPrimaryColor, EStepsSecondaryColor } from "../Steps/constants.js";
+import { DEFAULT_TITLE, EVoteSize, ZERO_VALUE } from "./constants.js";
 import { Steps } from "../Steps/Steps.js";
-import '../../assets/Vote.css';const container = "_container_4roqw_2";
-const title = "_title_4roqw_9";
-const score = "_score_4roqw_16";
-const zero = "_zero_4roqw_29";
-const LIGHT_GRAY = "_LIGHT_GRAY_4roqw_29";
-const WHITE = "_WHITE_4roqw_32";
-const LIGHT_SAPPHIRE = "_LIGHT_SAPPHIRE_4roqw_36";
-const GRAY = "_GRAY_4roqw_39";
-const CITRINE = "_CITRINE_4roqw_42";
-const SAPPHIRE = "_SAPPHIRE_4roqw_45";
+import { ZERO_STEP } from "../Steps/constants.js";
+import '../../assets/Vote.css';const container = "_container_1akd9_2";
+const title = "_title_1akd9_9";
+const score = "_score_1akd9_16";
 const cls = {
   container,
   title,
-  score,
-  zero,
-  LIGHT_GRAY,
-  WHITE,
-  LIGHT_SAPPHIRE,
-  GRAY,
-  CITRINE,
-  SAPPHIRE
+  score
 };
 const Vote = forwardRef((props, ref) => {
+  var _a;
   const {
     rootClassName,
     titleClassName,
@@ -40,12 +27,14 @@ const Vote = forwardRef((props, ref) => {
     size = EVoteSize.M,
     onClick,
     disabled = false,
-    primaryColor = EStepsPrimaryColor.CITRINE,
-    secondaryColor = EStepsSecondaryColor.WHITE,
-    needChangeFirstHalfColor = false
+    zones = [{ color: "#ff0000", to: quantity }],
+    unselectedColor = "#ffffff",
+    scoreTextColor = {
+      unselected: "#000000",
+      selected: "#ffffff"
+    }
   } = props;
   const [score2, setScore] = useState(current);
-  const [color, setColor] = useState(primaryColor);
   const isZeroStep = score2 === ZERO_STEP;
   useEffect(() => {
     setScore(current);
@@ -54,46 +43,36 @@ const Vote = forwardRef((props, ref) => {
     setScore(step);
     onClick && onClick(step);
   };
-  useEffect(() => {
-    if (!needChangeFirstHalfColor) return;
-    setColor(
-      score2 / quantity <= SCORE_TO_QUANTITY_THRESHOLD ? EStepsPrimaryColor.GRAY : primaryColor
-    );
-  }, [score2, primaryColor, needChangeFirstHalfColor, quantity]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames(cls.container, rootClassName, cls[color]),
-      ref,
-      children: [
-        !withoutTitle && /* @__PURE__ */ jsx("p", { className: classNames(cls.title, titleClassName), children: title2 }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classNames(cls.score, scoreClassName, cls[secondaryColor], {
-              [cls.zero]: isZeroStep
-            }),
-            children: isZeroStep ? ZERO_VALUE : score2
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Steps,
-          {
-            rootClassName: stepsRootClassName,
-            stepClassName: stepsStepClassName,
-            quantity,
-            size,
-            current: score2,
-            editable: true,
-            disabled,
-            onClick: handleStepsClick,
-            primaryColor: color,
-            secondaryColor
-          }
-        )
-      ]
-    }
-  );
+  const backgroundColor = isZeroStep ? unselectedColor : ((_a = zones == null ? void 0 : zones.find((zone) => score2 <= zone.to)) == null ? void 0 : _a.color) || unselectedColor;
+  return /* @__PURE__ */ jsxs("div", { className: classNames(cls.container, rootClassName), ref, children: [
+    !withoutTitle && /* @__PURE__ */ jsx("p", { className: classNames(cls.title, titleClassName), children: title2 }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(cls.score, scoreClassName),
+        style: {
+          backgroundColor,
+          color: isZeroStep ? scoreTextColor.unselected : scoreTextColor.selected
+        },
+        children: isZeroStep ? ZERO_VALUE : score2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Steps,
+      {
+        rootClassName: stepsRootClassName,
+        stepClassName: stepsStepClassName,
+        quantity,
+        size,
+        current: score2,
+        editable: true,
+        disabled,
+        onClick: handleStepsClick,
+        zones,
+        unselectedColor
+      }
+    )
+  ] });
 });
 export {
   Vote

package/dist/components/index.d.ts

@@ -19,7 +19,7 @@ export { Loader } from './Loader';
 export { Slider } from './Slider';
 export { Drawer } from './Drawer';
 export { EDrawerPosition } from './Drawer';
-export { Steps, EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize, type TCommonStepsProps } from './Steps';
+export { Steps, EStepsSize, EStepColor, type TCommonStepsProps } from './Steps';
 export { Vote, EVoteSize, type TCommonVoteProps } from './Vote';
 export { SelectSearch, ESelectSearchSize } from './SelectSearch';
 export type { TSelectSearchProps, TSelectOption } from './SelectSearch';

package/dist/components/index.js

@@ -17,7 +17,7 @@ import { Slider } from "./Slider/Slider.js";
 import { Drawer } from "./Drawer/Drawer.js";
 import { EDrawerPosition } from "./Drawer/constants.js";
 import { Steps } from "./Steps/Steps.js";
-import { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from "./Steps/constants.js";
+import { EStepColor, EStepsSize } from "./Steps/constants.js";
 import { Vote } from "./Vote/Vote.js";
 import { EVoteSize } from "./Vote/constants.js";
 import { SelectSearch } from "./SelectSearch/SelectSearch.js";
@@ -61,8 +61,7 @@ export {
   EMergedButtonVariantRound,
   ENotificationBadgeSize,
   ESelectSearchSize,
-  EStepsPrimaryColor,
-  EStepsSecondaryColor,
+  EStepColor,
   EStepsSize,
   ETabTrailSize,
   ETagSize,

package/dist/index.js

@@ -17,7 +17,7 @@ import { Slider } from "./components/Slider/Slider.js";
 import { Drawer } from "./components/Drawer/Drawer.js";
 import { EDrawerPosition } from "./components/Drawer/constants.js";
 import { Steps } from "./components/Steps/Steps.js";
-import { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from "./components/Steps/constants.js";
+import { EStepColor, EStepsSize } from "./components/Steps/constants.js";
 import { Vote } from "./components/Vote/Vote.js";
 import { EVoteSize } from "./components/Vote/constants.js";
 import { SelectSearch } from "./components/SelectSearch/SelectSearch.js";
@@ -72,8 +72,7 @@ import './assets/index.css';export {
   EMinMediaQuery,
   ENotificationBadgeSize,
   ESelectSearchSize,
-  EStepsPrimaryColor,
-  EStepsSecondaryColor,
+  EStepColor,
   EStepsSize,
   ETabTrailSize,
   ETagSize,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.18.0",
+  "version": "1.19.0",
   "type": "module",
   "exports": {
     ".": {