@alfalab/core-components-circular-progress-bar 2.3.4 → 2.4.3

package/index.css

@@ -0,0 +1,212 @@
+/* hash: ws88i */
+:root {
+    --color-light-bg-tertiary: #e7e9eb;
+    --color-light-graphic-negative: #f15045;
+    --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-secondary: #6d7986;
+    --color-light-graphic-tertiary: #b6bcc3;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+    /* bg */
+    --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
+
+    /* positive */
+    --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
+
+    /* negative */
+    --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
+
+    /* theme */
+    --circular-progress-bar-font-family: var(--font-family-system);
+    --circular-progress-bar-font-weight: 600;
+}
+.circular-progress-bar__component_1piud {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.circular-progress-bar__svg_1piud {
+    display: block;
+    width: 100%;
+}
+.circular-progress-bar__title_1piud,
+.circular-progress-bar__subtitle_1piud {
+    overflow: hidden;
+    word-break: break-word;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin: 0 6px;
+}
+.circular-progress-bar__subtitle_1piud {
+    max-height: 40px;
+}
+.circular-progress-bar__labelWrapper_1piud {
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%)
+}
+.circular-progress-bar__labelWrapper_1piud.circular-progress-bar__label_1piud {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+.circular-progress-bar__typography_1piud {
+    font-feature-settings: 'ss01';
+    font-weight: var(--circular-progress-bar-font-weight);
+    font-family: var(--circular-progress-bar-font-family);
+}
+.circular-progress-bar__xxl_1piud {
+    width: 144px;
+    height: 144px
+}
+.circular-progress-bar__xxl_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 128px;
+    }
+.circular-progress-bar__xxl_1piud .circular-progress-bar__title_1piud {
+        max-height: 32px;
+    }
+.circular-progress-bar__xl_1piud {
+    width: 128px;
+    height: 128px
+}
+.circular-progress-bar__xl_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 108px;
+    }
+.circular-progress-bar__xl_1piud .circular-progress-bar__title_1piud {
+        max-height: 32px;
+    }
+.circular-progress-bar__l_1piud {
+    width: 80px;
+    height: 80px
+}
+.circular-progress-bar__l_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 64px;
+    }
+.circular-progress-bar__l_1piud .circular-progress-bar__title_1piud {
+        max-height: 24px;
+    }
+.circular-progress-bar__m_1piud {
+    width: 64px;
+    height: 64px
+}
+.circular-progress-bar__m_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 48px;
+    }
+.circular-progress-bar__m_1piud .circular-progress-bar__title_1piud {
+        max-height: 16px;
+        margin: 0;
+    }
+.circular-progress-bar__s_1piud {
+    width: 48px;
+    height: 48px
+}
+.circular-progress-bar__s_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 40px;
+    }
+.circular-progress-bar__s_1piud .circular-progress-bar__title_1piud {
+        max-height: 16px;
+        margin: 0;
+    }
+.circular-progress-bar__xs_1piud {
+    width: 24px;
+    height: 24px
+}
+.circular-progress-bar__xs_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 24px;
+    }
+.circular-progress-bar__backgroundCircle_1piud,
+.circular-progress-bar__progressCircle_1piud {
+    width: 100%;
+    height: 100%;
+    fill: transparent;
+}
+.circular-progress-bar__positive_1piud {
+    stroke: var(--circular-progress-bar-positive-color);
+}
+.circular-progress-bar__negative_1piud {
+    stroke: var(--circular-progress-bar-negative-color);
+}
+.circular-progress-bar__backgroundCircle_1piud {
+    stroke: var(--circular-progress-bar-bg-color)
+}
+.circular-progress-bar__backgroundCircle_1piud.circular-progress-bar__stroke_1piud {
+        stroke: transparent;
+    }
+.circular-progress-bar__progressCircle_1piud {
+    stroke-linecap: round
+}
+.circular-progress-bar__progressCircle_1piud.circular-progress-bar__bg-positive_1piud {
+        fill: var(--circular-progress-bar-positive-color);
+    }
+.circular-progress-bar__progressCircle_1piud.circular-progress-bar__bg-negative_1piud {
+        fill: var(--circular-progress-bar-negative-color);
+    }
+.circular-progress-bar__iconWrapper_1piud {
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xxl_1piud {
+        max-width: 64px;
+        max-height: 64px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xl_1piud {
+        max-width: 64px;
+        max-height: 64px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__l_1piud {
+        max-width: 48px;
+        max-height: 48px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__m_1piud {
+        max-width: 36px;
+        max-height: 36px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__s_1piud {
+        max-width: 24px;
+        max-height: 24px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xs_1piud {
+        max-width: 16px;
+        max-height: 16px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-tertiary_1piud {
+        color: var(--color-light-graphic-tertiary);
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-positive_1piud {
+        color: var(--color-light-graphic-positive);
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-negative_1piud {
+        color: var(--color-light-graphic-negative);
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-primary-inverted_1piud {
+        color: var(--color-light-graphic-primary-inverted);
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-primary_1piud {
+        color: var(--color-light-graphic-primary);
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-secondary_1piud {
+        color: var(--color-light-graphic-secondary);
+    }
+.circular-progress-bar__icon_1piud {
+    width: 100%;
+    height: 100%;
+}

package/{dist/index.js → index.js}

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var Component = require('./Component.js');
 require('classnames');
 require('react');
 require('@alfalab/core-components-typography');
-var Component = require('./Component.js');
 
 
 

package/modern/Component.d.ts

@@ -0,0 +1,93 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode, ElementType } from "react";
+type CircularProgressBarProps = {
+    /**
+     * Уровень прогресса, %
+     */
+    value: number;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Основной текст
+     */
+    title?: ReactNode;
+    /**
+     * Цвет контента
+     */
+    contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
+    /**
+     * Дополнительный текст
+     */
+    subtitle?: ReactNode;
+    /**
+     * Основной текст при 100%
+     */
+    titleComplete?: ReactNode;
+    /**
+     * Дополнительный текст при 100%
+     */
+    subtitleComplete?: ReactNode;
+    /**
+     * Цвет заполнения
+     */
+    view?: 'positive' | 'negative';
+    /**
+     * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
+     */
+    size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
+    /**
+     * Наличие желоба
+     */
+    stroke?: boolean;
+    /**
+     * Заливка при 100%
+     */
+    fillComplete?: boolean;
+    /**
+     * Цвет текста при 100%
+     */
+    completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';
+    /**
+     * Цвет иконки при 100%
+     */
+    completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';
+    /**
+     * Компонент иконки
+     */
+    icon?: ElementType<{
+        className?: string;
+    }>;
+    /**
+     * Компонент иконки при 100%
+     */
+    iconComplete?: ElementType<{
+        className?: string;
+    }>;
+    /**
+     * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)
+     */
+    direction?: 'clockwise' | 'counter-clockwise';
+    /**
+     * Высота компонента, min = 24; max = 144
+     * использовать совместно с size :
+     * xxl от 144
+     * xl  от 128 до 143
+     * l   от 80 до 127
+     * m   от 64 до 79
+     * s   от 48 до 63
+     * xs  от 24 до 47
+     */
+    height?: number;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+};
+/**
+ * Компонент круглого прогресс бара.
+ */
+declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
+export { CircularProgressBarProps, CircularProgressBar };

package/modern/Component.js

@@ -0,0 +1,100 @@
+import cn from 'classnames';
+import React, { useMemo } from 'react';
+import { Typography } from '@alfalab/core-components-typography/modern';
+
+var styles = {"component":"circular-progress-bar__component_1piud","svg":"circular-progress-bar__svg_1piud","title":"circular-progress-bar__title_1piud","subtitle":"circular-progress-bar__subtitle_1piud","labelWrapper":"circular-progress-bar__labelWrapper_1piud","label":"circular-progress-bar__label_1piud","typography":"circular-progress-bar__typography_1piud","xxl":"circular-progress-bar__xxl_1piud","xl":"circular-progress-bar__xl_1piud","l":"circular-progress-bar__l_1piud","m":"circular-progress-bar__m_1piud","s":"circular-progress-bar__s_1piud","xs":"circular-progress-bar__xs_1piud","backgroundCircle":"circular-progress-bar__backgroundCircle_1piud","progressCircle":"circular-progress-bar__progressCircle_1piud","positive":"circular-progress-bar__positive_1piud","negative":"circular-progress-bar__negative_1piud","stroke":"circular-progress-bar__stroke_1piud","bg-positive":"circular-progress-bar__bg-positive_1piud","bg-negative":"circular-progress-bar__bg-negative_1piud","iconWrapper":"circular-progress-bar__iconWrapper_1piud","icon-tertiary":"circular-progress-bar__icon-tertiary_1piud","icon-positive":"circular-progress-bar__icon-positive_1piud","icon-negative":"circular-progress-bar__icon-negative_1piud","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1piud","icon-primary":"circular-progress-bar__icon-primary_1piud","icon-secondary":"circular-progress-bar__icon-secondary_1piud","icon":"circular-progress-bar__icon_1piud"};
+require('./index.css')
+
+const SIZES = {
+    xs: 24,
+    s: 48,
+    m: 64,
+    l: 80,
+    xl: 128,
+    xxl: 144,
+};
+const STROKE = {
+    xs: 4,
+    s: 4,
+    m: 6,
+    l: 8,
+    xl: 10,
+    xxl: 12,
+};
+const VIEW_TITLE = {
+    xs: 'small',
+    s: 'small',
+    m: 'small',
+    l: 'xsmall',
+    xl: 'medium',
+    xxl: 'medium',
+};
+const VIEW_TEXT = {
+    xs: 'secondary-small',
+    s: 'secondary-small',
+    m: 'secondary-large',
+    l: 'secondary-large',
+    xl: 'secondary-large',
+    xxl: 'secondary-large',
+};
+/**
+ * Компонент круглого прогресс бара.
+ */
+const CircularProgressBar = ({ value, view = 'positive', size = 'm', className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, }) => {
+    const memorized = useMemo(() => {
+        const strokeWidth = STROKE[size];
+        const maxProgress = 100;
+        const minProgress = 0;
+        const widthSVG = SIZES[size];
+        const heightSVG = SIZES[size];
+        const center = widthSVG / 2;
+        const radius = center - strokeWidth / 2;
+        const circumference = Math.PI * radius * 2;
+        const progress = Math.min(Math.max(value, minProgress), maxProgress);
+        const strokeDasharray = circumference.toFixed(3);
+        const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
+        return {
+            widthSVG,
+            heightSVG,
+            center,
+            radius,
+            strokeDasharray,
+            strokeDashoffset,
+        };
+    }, [value, size]);
+    const isComplete = value === 100;
+    const isCompleteTextColor = isComplete && completeTextColor;
+    const titleContent = titleComplete && isComplete ? titleComplete : title;
+    const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
+    const IconComponent = IconComplete && isComplete ? IconComplete : Icon;
+    const renderTitleString = () => {
+        return (React.createElement(React.Fragment, null, SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent))));
+    };
+    const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
+    const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
+    const renderIcon = () => {
+        return (React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles.tertiary, styles[`icon-${contentColor}`], {
+                [styles[`icon-${completeIconColor}`]]: completeIconColor,
+            }) }, IconComponent && React.createElement(IconComponent, { className: styles.icon })));
+    };
+    const renderContent = () => Icon || (IconComplete && isComplete) ? (renderIcon()) : (React.createElement(React.Fragment, null,
+        SIZES[size] > 24 && renderTitle(),
+        SIZES[size] > 64 && renderSubTitle()));
+    return (React.createElement("div", { className: cn(styles.component, styles[size], className), style: {
+            ...(height && { height, width: height }),
+        }, "data-test-id": dataTestId },
+        React.createElement("svg", { viewBox: `0 0 ${memorized.widthSVG} ${memorized.heightSVG}`, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
+            React.createElement("circle", { className: cn(styles.backgroundCircle, styles[size], {
+                    [styles.stroke]: !stroke,
+                }), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
+            React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size], {
+                    [styles[`bg-${view}`]]: fillComplete && isComplete,
+                }), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
+                    ? -memorized.strokeDashoffset
+                    : memorized.strokeDashoffset, transform: `rotate(${-90} ${memorized.center} ${memorized.center})` })),
+        React.createElement("div", { className: cn(styles.labelWrapper, {
+                [styles.label]: Icon || IconComplete,
+            }) }, children || renderContent())));
+};
+
+export { CircularProgressBar };

package/modern/index.css

@@ -0,0 +1,212 @@
+/* hash: ws88i */
+:root {
+    --color-light-bg-tertiary: #e7e9eb;
+    --color-light-graphic-negative: #f15045;
+    --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-secondary: #6d7986;
+    --color-light-graphic-tertiary: #b6bcc3;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+    /* bg */
+    --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
+
+    /* positive */
+    --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
+
+    /* negative */
+    --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
+
+    /* theme */
+    --circular-progress-bar-font-family: var(--font-family-system);
+    --circular-progress-bar-font-weight: 600;
+}
+.circular-progress-bar__component_1piud {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.circular-progress-bar__svg_1piud {
+    display: block;
+    width: 100%;
+}
+.circular-progress-bar__title_1piud,
+.circular-progress-bar__subtitle_1piud {
+    overflow: hidden;
+    word-break: break-word;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin: 0 6px;
+}
+.circular-progress-bar__subtitle_1piud {
+    max-height: 40px;
+}
+.circular-progress-bar__labelWrapper_1piud {
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%)
+}
+.circular-progress-bar__labelWrapper_1piud.circular-progress-bar__label_1piud {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+.circular-progress-bar__typography_1piud {
+    font-feature-settings: 'ss01';
+    font-weight: var(--circular-progress-bar-font-weight);
+    font-family: var(--circular-progress-bar-font-family);
+}
+.circular-progress-bar__xxl_1piud {
+    width: 144px;
+    height: 144px
+}
+.circular-progress-bar__xxl_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 128px;
+    }
+.circular-progress-bar__xxl_1piud .circular-progress-bar__title_1piud {
+        max-height: 32px;
+    }
+.circular-progress-bar__xl_1piud {
+    width: 128px;
+    height: 128px
+}
+.circular-progress-bar__xl_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 108px;
+    }
+.circular-progress-bar__xl_1piud .circular-progress-bar__title_1piud {
+        max-height: 32px;
+    }
+.circular-progress-bar__l_1piud {
+    width: 80px;
+    height: 80px
+}
+.circular-progress-bar__l_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 64px;
+    }
+.circular-progress-bar__l_1piud .circular-progress-bar__title_1piud {
+        max-height: 24px;
+    }
+.circular-progress-bar__m_1piud {
+    width: 64px;
+    height: 64px
+}
+.circular-progress-bar__m_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 48px;
+    }
+.circular-progress-bar__m_1piud .circular-progress-bar__title_1piud {
+        max-height: 16px;
+        margin: 0;
+    }
+.circular-progress-bar__s_1piud {
+    width: 48px;
+    height: 48px
+}
+.circular-progress-bar__s_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 40px;
+    }
+.circular-progress-bar__s_1piud .circular-progress-bar__title_1piud {
+        max-height: 16px;
+        margin: 0;
+    }
+.circular-progress-bar__xs_1piud {
+    width: 24px;
+    height: 24px
+}
+.circular-progress-bar__xs_1piud .circular-progress-bar__labelWrapper_1piud {
+        max-width: 24px;
+    }
+.circular-progress-bar__backgroundCircle_1piud,
+.circular-progress-bar__progressCircle_1piud {
+    width: 100%;
+    height: 100%;
+    fill: transparent;
+}
+.circular-progress-bar__positive_1piud {
+    stroke: var(--circular-progress-bar-positive-color);
+}
+.circular-progress-bar__negative_1piud {
+    stroke: var(--circular-progress-bar-negative-color);
+}
+.circular-progress-bar__backgroundCircle_1piud {
+    stroke: var(--circular-progress-bar-bg-color)
+}
+.circular-progress-bar__backgroundCircle_1piud.circular-progress-bar__stroke_1piud {
+        stroke: transparent;
+    }
+.circular-progress-bar__progressCircle_1piud {
+    stroke-linecap: round
+}
+.circular-progress-bar__progressCircle_1piud.circular-progress-bar__bg-positive_1piud {
+        fill: var(--circular-progress-bar-positive-color);
+    }
+.circular-progress-bar__progressCircle_1piud.circular-progress-bar__bg-negative_1piud {
+        fill: var(--circular-progress-bar-negative-color);
+    }
+.circular-progress-bar__iconWrapper_1piud {
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xxl_1piud {
+        max-width: 64px;
+        max-height: 64px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xl_1piud {
+        max-width: 64px;
+        max-height: 64px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__l_1piud {
+        max-width: 48px;
+        max-height: 48px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__m_1piud {
+        max-width: 36px;
+        max-height: 36px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__s_1piud {
+        max-width: 24px;
+        max-height: 24px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xs_1piud {
+        max-width: 16px;
+        max-height: 16px;
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-tertiary_1piud {
+        color: var(--color-light-graphic-tertiary);
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-positive_1piud {
+        color: var(--color-light-graphic-positive);
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-negative_1piud {
+        color: var(--color-light-graphic-negative);
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-primary-inverted_1piud {
+        color: var(--color-light-graphic-primary-inverted);
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-primary_1piud {
+        color: var(--color-light-graphic-primary);
+    }
+.circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-secondary_1piud {
+        color: var(--color-light-graphic-secondary);
+    }
+.circular-progress-bar__icon_1piud {
+    width: 100%;
+    height: 100%;
+}

package/{dist/modern → modern}/index.js

@@ -1,4 +1,4 @@
 import 'classnames';
 import 'react';
-import '@alfalab/core-components-typography/dist/modern';
+import '@alfalab/core-components-typography/modern';
 export { CircularProgressBar } from './Component.js';

package/package.json

@@ -1,26 +1,23 @@
 {
     "name": "@alfalab/core-components-circular-progress-bar",
-    "version": "2.3.4",
+    "version": "2.4.3",
     "description": "",
     "keywords": [],
     "license": "MIT",
-    "main": "dist/index.js",
-    "module": "./dist/esm/index.js",
-    "files": [
-        "dist"
-    ],
+    "main": "index.js",
+    "module": "./esm/index.js",
     "scripts": {
-        "postinstall": "node ./dist/send-stats.js > /dev/null 2>&1 || exit 0"
+        "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
     },
     "publishConfig": {
-        "access": "public"
+        "access": "public",
+        "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-typography": "^2.5.3",
-        "classnames": "2.2.6"
+        "@alfalab/core-components-typography": "^2.6.3",
+        "classnames": "^2.2.6"
     },
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1"
-    },
-    "gitHead": "34040e2552da41291b99609b318aae4f8c1f3899"
+    }
 }