@alfalab/core-components-circular-progress-bar 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-circular-progress-bar@2.4.3...@alfalab/core-components-circular-progress-bar@2.5.0) (2022-07-22)
+
+
+### Features
+
+* **circular-progress-bar:** added new sizes and props ([#122](https://github.com/core-ds/core-components/issues/122)) ([9b1c412](https://github.com/core-ds/core-components/commit/9b1c4126aabc516349655a51c6302d6af84aa129))
+
+
+
+
+
+## [2.4.3](https://github.com/core-ds/core-components/compare/@alfalab/core-components-circular-progress-bar@2.4.2...@alfalab/core-components-circular-progress-bar@2.4.3) (2022-07-18)
+
+**Note:** Version bump only for package @alfalab/core-components-circular-progress-bar
+
+
+
+
+
+## [2.4.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-circular-progress-bar@2.4.1...@alfalab/core-components-circular-progress-bar@2.4.2) (2022-07-15)
+
+
+### Bug Fixes
+
+* bump packages version ([#153](https://github.com/core-ds/core-components/issues/153)) ([fd3e082](https://github.com/core-ds/core-components/commit/fd3e08205672129cdce04e1000c673f2cd9c10da))
+
+
+
+
+
+## [2.4.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-circular-progress-bar@2.4.0...@alfalab/core-components-circular-progress-bar@2.4.1) (2022-07-14)
+
+**Note:** Version bump only for package @alfalab/core-components-circular-progress-bar
+
+
+
+
+
 # [2.4.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-circular-progress-bar@2.3.4...@alfalab/core-components-circular-progress-bar@2.4.0) (2022-06-28)
 
 
@@ -174,4 +212,5 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [1.2.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-circular-progress-bar@1.2.0...@alfalab/core-components-circular-progress-bar@1.2.1) (2021-03-03)
 
+
 **Note:** Version bump only for package @alfalab/core-components-circular-progress-bar

package/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/Component.js

@@ -0,0 +1,141 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cn = require('classnames');
+var React = require('react');
+var coreComponentsTypography = require('@alfalab/core-components-typography');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/*! *****************************************************************************
+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":"circular-progress-bar__component_1h0qp","svg":"circular-progress-bar__svg_1h0qp","title":"circular-progress-bar__title_1h0qp","subtitle":"circular-progress-bar__subtitle_1h0qp","labelWrapper":"circular-progress-bar__labelWrapper_1h0qp","label":"circular-progress-bar__label_1h0qp","typography":"circular-progress-bar__typography_1h0qp","xxl":"circular-progress-bar__xxl_1h0qp","xl":"circular-progress-bar__xl_1h0qp","l":"circular-progress-bar__l_1h0qp","m":"circular-progress-bar__m_1h0qp","s":"circular-progress-bar__s_1h0qp","xs":"circular-progress-bar__xs_1h0qp","backgroundCircle":"circular-progress-bar__backgroundCircle_1h0qp","progressCircle":"circular-progress-bar__progressCircle_1h0qp","positive":"circular-progress-bar__positive_1h0qp","negative":"circular-progress-bar__negative_1h0qp","stroke":"circular-progress-bar__stroke_1h0qp","bg-positive":"circular-progress-bar__bg-positive_1h0qp","bg-negative":"circular-progress-bar__bg-negative_1h0qp","iconWrapper":"circular-progress-bar__iconWrapper_1h0qp","icon-tertiary":"circular-progress-bar__icon-tertiary_1h0qp","icon-positive":"circular-progress-bar__icon-positive_1h0qp","icon-negative":"circular-progress-bar__icon-negative_1h0qp","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1h0qp","icon-primary":"circular-progress-bar__icon-primary_1h0qp","icon-secondary":"circular-progress-bar__icon-secondary_1h0qp","icon":"circular-progress-bar__icon_1h0qp"};
+require('./index.css')
+
+var SIZES = {
+    xs: 24,
+    s: 48,
+    m: 64,
+    l: 80,
+    xl: 128,
+    xxl: 144,
+};
+var STROKE = {
+    xs: 4,
+    s: 4,
+    m: 6,
+    l: 8,
+    xl: 10,
+    xxl: 12,
+};
+var VIEW_TITLE = {
+    xs: 'small',
+    s: 'small',
+    m: 'small',
+    l: 'xsmall',
+    xl: 'medium',
+    xxl: 'medium',
+};
+var VIEW_TEXT = {
+    xs: 'secondary-small',
+    s: 'secondary-small',
+    m: 'secondary-large',
+    l: 'secondary-large',
+    xl: 'secondary-large',
+    xxl: 'secondary-large',
+};
+/**
+ * Компонент круглого прогресс бара.
+ */
+var CircularProgressBar = function (_a) {
+    var _b, _c, _d;
+    var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children;
+    var memorized = React.useMemo(function () {
+        var strokeWidth = STROKE[size];
+        var maxProgress = 100;
+        var minProgress = 0;
+        var widthSVG = SIZES[size];
+        var heightSVG = SIZES[size];
+        var center = widthSVG / 2;
+        var radius = center - strokeWidth / 2;
+        var circumference = Math.PI * radius * 2;
+        var progress = Math.min(Math.max(value, minProgress), maxProgress);
+        var strokeDasharray = circumference.toFixed(3);
+        var strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
+        return {
+            widthSVG: widthSVG,
+            heightSVG: heightSVG,
+            center: center,
+            radius: radius,
+            strokeDasharray: strokeDasharray,
+            strokeDashoffset: strokeDashoffset,
+        };
+    }, [value, size]);
+    var isComplete = value === 100;
+    var isCompleteTextColor = isComplete && completeTextColor;
+    var titleContent = titleComplete && isComplete ? titleComplete : title;
+    var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
+    var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
+    var renderTitleString = function () {
+        return (React__default['default'].createElement(React__default['default'].Fragment, null, SIZES[size] > 64 ? (React__default['default'].createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default['default'](styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent))));
+    };
+    var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
+    var renderSubTitle = function () {
+        return typeof subtitle === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
+    };
+    var renderIcon = function () {
+        var _a;
+        return (React__default['default'].createElement("span", { className: cn__default['default'](styles.iconWrapper, styles[size], styles.tertiary, styles["icon-" + contentColor], (_a = {},
+                _a[styles["icon-" + completeIconColor]] = completeIconColor,
+                _a)) }, IconComponent && React__default['default'].createElement(IconComponent, { className: styles.icon })));
+    };
+    var renderContent = function () {
+        return Icon || (IconComplete && isComplete) ? (renderIcon()) : (React__default['default'].createElement(React__default['default'].Fragment, null,
+            SIZES[size] > 24 && renderTitle(),
+            SIZES[size] > 64 && renderSubTitle()));
+    };
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[size], className), style: __assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
+        React__default['default'].createElement("svg", { viewBox: "0 0 " + memorized.widthSVG + " " + memorized.heightSVG, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
+            React__default['default'].createElement("circle", { className: cn__default['default'](styles.backgroundCircle, styles[size], (_b = {},
+                    _b[styles.stroke] = !stroke,
+                    _b)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
+            React__default['default'].createElement("circle", { className: cn__default['default'](styles.progressCircle, styles[view], styles[size], (_c = {},
+                    _c[styles["bg-" + view]] = fillComplete && isComplete,
+                    _c)), 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__default['default'].createElement("div", { className: cn__default['default'](styles.labelWrapper, (_d = {},
+                _d[styles.label] = Icon || IconComplete,
+                _d)) }, children || renderContent())));
+};
+
+exports.CircularProgressBar = CircularProgressBar;

package/cssm/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/cssm/Component.js

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cn = require('classnames');
+var React = require('react');
+var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+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 SIZES = {
+    xs: 24,
+    s: 48,
+    m: 64,
+    l: 80,
+    xl: 128,
+    xxl: 144,
+};
+var STROKE = {
+    xs: 4,
+    s: 4,
+    m: 6,
+    l: 8,
+    xl: 10,
+    xxl: 12,
+};
+var VIEW_TITLE = {
+    xs: 'small',
+    s: 'small',
+    m: 'small',
+    l: 'xsmall',
+    xl: 'medium',
+    xxl: 'medium',
+};
+var VIEW_TEXT = {
+    xs: 'secondary-small',
+    s: 'secondary-small',
+    m: 'secondary-large',
+    l: 'secondary-large',
+    xl: 'secondary-large',
+    xxl: 'secondary-large',
+};
+/**
+ * Компонент круглого прогресс бара.
+ */
+var CircularProgressBar = function (_a) {
+    var _b, _c, _d;
+    var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children;
+    var memorized = React.useMemo(function () {
+        var strokeWidth = STROKE[size];
+        var maxProgress = 100;
+        var minProgress = 0;
+        var widthSVG = SIZES[size];
+        var heightSVG = SIZES[size];
+        var center = widthSVG / 2;
+        var radius = center - strokeWidth / 2;
+        var circumference = Math.PI * radius * 2;
+        var progress = Math.min(Math.max(value, minProgress), maxProgress);
+        var strokeDasharray = circumference.toFixed(3);
+        var strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
+        return {
+            widthSVG: widthSVG,
+            heightSVG: heightSVG,
+            center: center,
+            radius: radius,
+            strokeDasharray: strokeDasharray,
+            strokeDashoffset: strokeDashoffset,
+        };
+    }, [value, size]);
+    var isComplete = value === 100;
+    var isCompleteTextColor = isComplete && completeTextColor;
+    var titleContent = titleComplete && isComplete ? titleComplete : title;
+    var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
+    var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
+    var renderTitleString = function () {
+        return (React__default['default'].createElement(React__default['default'].Fragment, null, SIZES[size] > 64 ? (React__default['default'].createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default['default'](styles__default['default'].typography, styles__default['default'].title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: styles__default['default'].title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent))));
+    };
+    var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
+    var renderSubTitle = function () {
+        return typeof subtitle === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles__default['default'].subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
+    };
+    var renderIcon = function () {
+        var _a;
+        return (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].iconWrapper, styles__default['default'][size], styles__default['default'].tertiary, styles__default['default']["icon-" + contentColor], (_a = {},
+                _a[styles__default['default']["icon-" + completeIconColor]] = completeIconColor,
+                _a)) }, IconComponent && React__default['default'].createElement(IconComponent, { className: styles__default['default'].icon })));
+    };
+    var renderContent = function () {
+        return Icon || (IconComplete && isComplete) ? (renderIcon()) : (React__default['default'].createElement(React__default['default'].Fragment, null,
+            SIZES[size] > 24 && renderTitle(),
+            SIZES[size] > 64 && renderSubTitle()));
+    };
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][size], className), style: __assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
+        React__default['default'].createElement("svg", { viewBox: "0 0 " + memorized.widthSVG + " " + memorized.heightSVG, className: styles__default['default'].svg, xmlns: 'http://www.w3.org/2000/svg' },
+            React__default['default'].createElement("circle", { className: cn__default['default'](styles__default['default'].backgroundCircle, styles__default['default'][size], (_b = {},
+                    _b[styles__default['default'].stroke] = !stroke,
+                    _b)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
+            React__default['default'].createElement("circle", { className: cn__default['default'](styles__default['default'].progressCircle, styles__default['default'][view], styles__default['default'][size], (_c = {},
+                    _c[styles__default['default']["bg-" + view]] = fillComplete && isComplete,
+                    _c)), 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__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].labelWrapper, (_d = {},
+                _d[styles__default['default'].label] = Icon || IconComplete,
+                _d)) }, children || renderContent())));
+};
+
+exports.CircularProgressBar = CircularProgressBar;

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

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