@trilogy-ds/react 0.0.1-beta-147 → 0.0.1-beta-sc-2

package/lib/components/progress/item/index.d.ts

@@ -0,0 +1,2 @@
+import ProgressItem from '../../../components/progress/item/ProgressItem';
+export default ProgressItem;

package/lib/components/progress/item/index.js

@@ -0,0 +1,3 @@
+import ProgressItem from '../../../components/progress/item/ProgressItem';
+export default ProgressItem;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL2l0ZW0vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxZQUFZLE1BQU0seUNBQXlDLENBQUE7QUFFbEUsZUFBZSxZQUFZLENBQUEifQ==

package/lib/components/progress/radial/ProgressRadial.d.ts

@@ -1,16 +1,22 @@
-/// <reference types="react" />
-import { ProgressRadialProps } from './ProgressRadialProps';
+import React from 'react';
+import { ProgressRadialProps } from '../../../components/progress/radial/ProgressRadialProps';
 /**
  * Progress Radial component
  * @param percent {number} Progress percent
  * @param label {string} Custom label
  * @param description {string} Custom description
  * @param children {React.ReactNode}
+ * @param secondPercent {number} Second progress percent
  * @param skeleton {boolean} Skeleton Progress Radial
  * - --------------- NATIVE PROPERTIES ----------------------------------
+ * @param status {StatusState} Progress status variant (SUCCESS|INFO|WARNING|ERROR|TERTIARY)
+ * @param secondStatus {StatusState} Second Progress status variant (SUCCESS|INFO|WARNING|ERROR|TERTIARY)
+ * @param full {boolean} Full progressRadial
+ * @param disk {boolean} Disk ProgressRadial
+ * @param align {Alignable} Progress Radial Alignement
  * - --------------- WEB PROPERTIES -------------------------------------
  * @param className {string} Additionnal CSS Classes
  * @param small {boolean} Display small progress radial
  */
-declare const ProgressRadial: ({ children, value, secondValue, label, description, skeleton, className, id, small, ...others }: ProgressRadialProps) => JSX.Element;
+declare const ProgressRadial: React.ForwardRefExoticComponent<ProgressRadialProps & React.RefAttributes<HTMLDivElement>>;
 export default ProgressRadial;

package/lib/components/progress/radial/ProgressRadial.js

@@ -1,74 +1,41 @@
-import { __assign, __read, __rest } from "tslib";
-import React, { useEffect, useRef, useState } from 'react';
+import { __assign, __rest } from "tslib";
 import clsx from 'clsx';
-import { is } from '../../../services/index';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
-import { Title, TitleLevels } from '../../title';
-import { Text, TextLevels } from '../../text';
-import { getColorStyle } from '../../../objects/facets/Color';
+import React from 'react';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { useProgressRadial } from '../../../components/progress/radial/hook/useProgressRadial';
+import { Text, TextLevels } from '../../../components/text';
+import { Title, TitleLevels } from '../../../components/title';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+import { is } from '../../../services/classify';
 /**
  * Progress Radial component
  * @param percent {number} Progress percent
  * @param label {string} Custom label
  * @param description {string} Custom description
  * @param children {React.ReactNode}
+ * @param secondPercent {number} Second progress percent
  * @param skeleton {boolean} Skeleton Progress Radial
  * - --------------- NATIVE PROPERTIES ----------------------------------
+ * @param status {StatusState} Progress status variant (SUCCESS|INFO|WARNING|ERROR|TERTIARY)
+ * @param secondStatus {StatusState} Second Progress status variant (SUCCESS|INFO|WARNING|ERROR|TERTIARY)
+ * @param full {boolean} Full progressRadial
+ * @param disk {boolean} Disk ProgressRadial
+ * @param align {Alignable} Progress Radial Alignement
  * - --------------- WEB PROPERTIES -------------------------------------
  * @param className {string} Additionnal CSS Classes
  * @param small {boolean} Display small progress radial
  */
-var ProgressRadial = function (_a) {
-    var children = _a.children, _b = _a.value, value = _b === void 0 ? 0 : _b, _c = _a.secondValue, secondValue = _c === void 0 ? 0 : _c, label = _a.label, description = _a.description, skeleton = _a.skeleton, className = _a.className, id = _a.id, small = _a.small, others = __rest(_a, ["children", "value", "secondValue", "label", "description", "skeleton", "className", "id", "small"]);
-    var styled = useTrilogyContext().styled;
-    var _d = __read(useState(0), 2), firstProgressCurrentValue = _d[0], setFirstProgressCurrentValue = _d[1];
-    var _e = __read(useState(0), 2), secondProgressCurrentValue = _e[0], setSecondProgressCurrentValue = _e[1];
-    var classes = hashClass(styled, clsx('progress-radial', skeleton && is('loading'), small && is('small'), className));
-    var classesContent = hashClass(styled, clsx('progress-radial-content'));
-    var progressRadialRef = useRef(null);
-    // Function to update the background style based on the current progress
-    var updateBackgroundStyle = function (firstValue, secondValue) {
-        var progressRadial = progressRadialRef.current;
-        if (!progressRadial) {
-            return;
-        }
-        var firstProgressDegree = (360 * firstValue) / 100;
-        var secondProgressDegree = (360 * secondValue) / 100;
-        // Ensure the second progress starts where the first ends
-        var secondProgressStartDegree = firstProgressDegree;
-        var styleBackground;
-        styleBackground = "radial-gradient(circle at center, white 58%, transparent 58.1%),";
-        styleBackground += "conic-gradient(#0C7B91 0 ".concat(firstProgressDegree, "deg, ").concat(getColorStyle('MAIN'), " ").concat(secondProgressStartDegree, "deg ").concat(secondProgressStartDegree + secondProgressDegree, "deg, gainsboro ").concat(secondProgressStartDegree + secondProgressDegree, "deg 360deg)");
-        progressRadial.style.background = styleBackground;
-    };
-    useEffect(function () {
-        var animationFrameId;
-        // Reset the current values whenever the provided percent or secondPercent change
-        setFirstProgressCurrentValue(0);
-        setSecondProgressCurrentValue(0);
-        updateBackgroundStyle(value, secondValue); // if percent or secondPercent are 0, update immediately
-        var frame = function () {
-            setFirstProgressCurrentValue(function (currentValue) {
-                return currentValue < value ? currentValue + 1 : currentValue;
-            });
-            setSecondProgressCurrentValue(function (currentValue) {
-                return currentValue < secondValue ? currentValue + 1 : currentValue;
-            });
-            animationFrameId = requestAnimationFrame(frame);
-        };
-        animationFrameId = requestAnimationFrame(frame);
-        // Cleanup
-        return function () { return cancelAnimationFrame(animationFrameId); };
-    }, [value, secondValue]);
-    useEffect(function () {
-        updateBackgroundStyle(firstProgressCurrentValue, secondProgressCurrentValue);
-    }, [firstProgressCurrentValue, secondProgressCurrentValue]);
-    return (React.createElement("div", __assign({ id: id }, others, { className: classes, ref: progressRadialRef }),
-        React.createElement("div", { className: classesContent },
+var ProgressRadial = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.percent, percent = _b === void 0 ? 0 : _b, _c = _a.secondPercent, secondPercent = _c === void 0 ? 0 : _c, label = _a.label, description = _a.description, skeleton = _a.skeleton, className = _a.className, small = _a.small, others = __rest(_a, ["children", "percent", "secondPercent", "label", "description", "skeleton", "className", "small"]);
+    var _d = useProgressRadial({ percent: percent, secondPercent: secondPercent }), progressRadialRef = _d.progressRadialRef, styleSSR = _d.styleSSR;
+    var classes = hashClass(clsx('progress-radial', skeleton && is('loading'), small && is('small'), className));
+    var classesContent = hashClass(clsx('progress-radial-content'));
+    return (React.createElement("div", __assign({ className: classes, ref: progressRadialRef, style: styleSSR }, others),
+        React.createElement("div", { className: classesContent, ref: ref },
             label && (React.createElement(Title, { level: TitleLevels.TWO, marginless: true }, label)),
             description && (React.createElement(Text, { level: TextLevels.ONE, marginless: true }, description)),
             !label && !description && children)));
-};
+});
+ProgressRadial.displayName = ComponentName.ProgressRadial;
 export default ProgressRadial;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3NSYWRpYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9Qcm9ncmVzc1JhZGlhbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDMUQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQTtBQUM1QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sa0JBQWtCLENBQUE7QUFDNUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0JBQWtCLENBQUE7QUFDcEQsT0FBTyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxhQUFhLENBQUE7QUFDaEQsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDN0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXREOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxjQUFjLEdBQUcsVUFBQyxFQVdGO0lBVnBCLElBQUEsUUFBUSxjQUFBLEVBQ1IsYUFBUyxFQUFULEtBQUssbUJBQUcsQ0FBQyxLQUFBLEVBQ1QsbUJBQWUsRUFBZixXQUFXLG1CQUFHLENBQUMsS0FBQSxFQUNmLEtBQUssV0FBQSxFQUNMLFdBQVcsaUJBQUEsRUFDWCxRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRixLQUFLLFdBQUEsRUFDRixNQUFNLGNBVmEsb0dBV3ZCLENBRFU7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUNoQyxJQUFBLEtBQUEsT0FBNEQsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQXRFLHlCQUF5QixRQUFB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3NSYWRpYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9Qcm9ncmVzc1JhZGlhbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFEQUFxRCxDQUFBO0FBRXZGLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUN2RCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRXhDOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCRztBQUNILElBQU0sY0FBYyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3JDLFVBQ0UsRUFVc0IsRUFDdEIsR0FBOEI7SUFWNUIsSUFBQSxRQUFRLGNBQUEsRUFDUixlQUFXLEVBQVgsT0FBTyxtQkFBRyxDQUFDLEtBQUEsRUFDWCxxQkFBaUIsRUFBakIsYUFBYSxtQkFBRyxDQUFDLEtBQUEsRUFDakIsS0FBSyxXQUFBLEVBQ0wsV0FBVyxpQkFBQSxFQUNYLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEtBQUssV0FBQSxFQUNGLE1BQU0sY0FUWCxrR0FVQyxDQURVO0lBSUwsSUFBQSxLQUFrQyxpQkFBaUIsQ0FBQyxFQUFFLE9BQU8sU0FBQSxFQUFFLGFBQWEsZUFBQSxFQUFFLENBQUMsRUFBN0UsaUJBQWlCLHVCQUFBLEVBQUUsUUFBUSxjQUFrRCxDQUFBO0lBRXJGLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLEVBQUUsUUFBUSxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsRUFBRSxLQUFLLElBQUksRUFBRSxDQUFDLE9BQU8sQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFDOUcsSUFBTSxjQUFjLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxDQUFDLENBQUE7SUFFakUsT0FBTyxDQUNMLHNDQUFLLFNBQVMsRUFBRSxPQUFPLEVBQUUsR0FBRyxFQUFFLGlCQUFpQixFQUFFLEtBQUssRUFBRSxRQUFRLElBQU0sTUFBTTtRQUMxRSw2QkFBSyxTQUFTLEVBQUUsY0FBYyxFQUFFLEdBQUcsRUFBRSxHQUFHO1lBQ3JDLEtBQUssSUFBSSxDQUNSLG9CQUFDLEtBQUssSUFBQyxLQUFLLEVBQUUsV0FBVyxDQUFDLEdBQUcsRUFBRSxVQUFVLFVBQ3RDLEtBQUssQ0FDQSxDQUNUO1lBQ0EsV0FBVyxJQUFJLENBQ2Qsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLFVBQVUsVUFDcEMsV0FBVyxDQUNQLENBQ1I7WUFDQSxDQUFDLEtBQUssSUFBSSxDQUFDLFdBQVcsSUFBSSxRQUFRLENBQy9CLENBQ0YsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxjQUFjLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxjQUFjLENBQUE7QUFDekQsZUFBZSxjQUFjLENBQUEifQ==

package/lib/components/progress/radial/ProgressRadial.native.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { ProgressRadialProps } from './ProgressRadialProps';
-import { ComponentName } from '../../../components/enumsComponentsName';
+import React from 'react';
+import { View } from 'react-native';
+import { ProgressRadialProps } from '../../../components/progress/radial/ProgressRadialProps';
 /**
  * Progress Radial component
  * @param percent {number} Progress percent
@@ -9,12 +9,11 @@ import { ComponentName } from '../../../components/enumsComponentsName';
  * @param status {StatusState} Progress status variant (SUCCESS|INFO|WARNING|ERROR|TERTIARY)
  * @param full {boolean} Full progressRadial
  * @param disk {boolean} Disk ProgressRadial
- * @param secondValueColor {TrilogyColor} Second Progress status variant (SUCCESS|INFO|WARNING|ERROR|TERTIARY)
+ * @param children {React.ReactNode}
+ * @param secondStatus {StatusState} Second Progress status variant (SUCCESS|INFO|WARNING|ERROR|TERTIARY)
+ * @param secondPercent {number} Second progress percent
  * @param align {Alignable} Progress Radial Alignement
  * @param skeleton {boolean} Skeleton Progress Radial
  */
-declare const ProgressRadial: {
-    ({ value, label, description, status, full, disk, secondValue, secondValueColor, align, skeleton, ...others }: ProgressRadialProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const ProgressRadial: React.ForwardRefExoticComponent<ProgressRadialProps & React.RefAttributes<View>>;
 export default ProgressRadial;

package/lib/components/progress/radial/ProgressRadial.native.js

@@ -1,12 +1,12 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
+import React from 'react';
+import ContentLoader, { Circle } from 'react-content-loader/native';
 import { Platform, StyleSheet, View } from 'react-native';
-import { AnimatedCircularProgress } from './react-native-circular-progress';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { AnimatedCircularProgress } from '../../../components/progress/radial/react-native-circular-progress';
 import { Text, TextLevels } from '../../../components/text';
 import { getAlignStyle, TypographyAlign } from '../../../objects';
 import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
-import ContentLoader, { Circle } from 'react-content-loader/native';
-import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Progress Radial component
  * @param percent {number} Progress percent
@@ -15,17 +15,19 @@ import { ComponentName } from '../../../components/enumsComponentsName';
  * @param status {StatusState} Progress status variant (SUCCESS|INFO|WARNING|ERROR|TERTIARY)
  * @param full {boolean} Full progressRadial
  * @param disk {boolean} Disk ProgressRadial
- * @param secondValueColor {TrilogyColor} Second Progress status variant (SUCCESS|INFO|WARNING|ERROR|TERTIARY)
+ * @param children {React.ReactNode}
+ * @param secondStatus {StatusState} Second Progress status variant (SUCCESS|INFO|WARNING|ERROR|TERTIARY)
+ * @param secondPercent {number} Second progress percent
  * @param align {Alignable} Progress Radial Alignement
  * @param skeleton {boolean} Skeleton Progress Radial
  */
-var ProgressRadial = function (_a) {
-    var value = _a.value, label = _a.label, description = _a.description, status = _a.status, full = _a.full, disk = _a.disk, secondValue = _a.secondValue, secondValueColor = _a.secondValueColor, align = _a.align, skeleton = _a.skeleton, others = __rest(_a, ["value", "label", "description", "status", "full", "disk", "secondValue", "secondValueColor", "align", "skeleton"]);
+var ProgressRadial = React.forwardRef(function (_a, ref) {
+    var percent = _a.percent, label = _a.label, description = _a.description, status = _a.status, full = _a.full, disk = _a.disk, secondPercent = _a.secondPercent, secondStatus = _a.secondStatus, align = _a.align, skeleton = _a.skeleton, others = __rest(_a, ["percent", "label", "description", "status", "full", "disk", "secondPercent", "secondStatus", "align", "skeleton"]);
     var color = getColorStyle(status || TrilogyColor.INFO);
     var backgroundColor = getColorStyle(TrilogyColor.MAIN_FADE);
-    var percentWidth = value || 0;
-    var secondFill = secondValue ? { secondFill: secondValue } : null;
-    var secondFillColor = { secondFillTintColor: getColorStyle(secondValueColor || TrilogyColor.MAIN) };
+    var percentWidth = percent || 0;
+    var secondFill = secondPercent ? { secondFill: secondPercent } : null;
+    var secondFillColor = { secondFillTintColor: getColorStyle(secondStatus || TrilogyColor.MAIN) };
     var progressRadialWidth = 100;
     var progressRadialSkeletonRadius = 50;
     var styles = StyleSheet.create({
@@ -72,23 +74,23 @@ var ProgressRadial = function (_a) {
         },
     });
     var ProgressRadialSkeleton = function () { return (React.createElement(ContentLoader, __assign({ style: styles.skeleton }, others),
-        React.createElement(View, { style: { opacity: 0 } }),
+        React.createElement(View, { style: { opacity: 0 }, ref: ref }),
         Platform.OS === 'android' && (React.createElement(View, null,
             React.createElement(Circle, { cx: '50', cy: '50', r: '50' }))))); };
     if (skeleton) {
         return React.createElement(ProgressRadialSkeleton, null);
     }
     if (disk) {
-        return (React.createElement(View, { style: styles.container },
+        return (React.createElement(View, { style: styles.container, ref: ref },
             React.createElement(View, __assign({ style: [styles.disk, styles.alignCenter] }, others),
                 label && typeof label.valueOf() === 'string' ? (React.createElement(Text, { style: styles.labelDisk, level: TextLevels.TWO }, label || '')) : (label),
                 description && typeof description.valueOf() === 'string' ? (React.createElement(Text, { style: styles.descriptionDisk, level: TextLevels.THREE, typo: TypographyAlign.TEXT_CENTERED }, description || '')) : (description))));
     }
-    return (React.createElement(View, __assign({ style: styles.container }, others),
+    return (React.createElement(View, __assign({ style: styles.container, ref: ref }, others),
         React.createElement(AnimatedCircularProgress, __assign({ size: 90, width: 7, fill: !full ? percentWidth : 100, tintColor: color, backgroundColor: backgroundColor, rotation: 0 }, secondFill, secondFillColor), function () { return (React.createElement(View, { style: styles.alignCenter },
             label && typeof label.valueOf() === 'string' ? (React.createElement(Text, { style: styles.label, level: TextLevels.TWO }, label || '')) : (React.createElement(View, null, label)),
             description && typeof description.valueOf() === 'string' ? (React.createElement(Text, { style: styles.description, level: TextLevels.FOUR }, description || '')) : (React.createElement(View, null, description)))); })));
-};
+});
 ProgressRadial.displayName = ComponentName.ProgressRadial;
 export default ProgressRadial;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3NSYWRpYWwubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9wcm9ncmVzcy9yYWRpYWwvUHJvZ3Jlc3NSYWRpYWwubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFFBQVEsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRXpELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQzNFLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxlQUFlLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDMUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLGFBQWEsRUFBRSxFQUFFLE1BQU0sRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBQ25FLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7Ozs7Ozs7R0FXRztBQUNILElBQU0sY0FBYyxHQUFHLFVBQUMsRUFZRjtJQVhwQixJQUFBLEtBQUssV0FBQSxFQUNMLEtBQUssV0FBQSxFQUNMLFdBQVcsaUJBQUEsRUFDWCxNQUFNLFlBQUEsRUFDTixJQUFJLFVBQUEsRUFDSixJQUFJLFVBQUEsRUFDSixXQUFXLGlCQUFBLEVBQ1gsZ0JBQWdCLHNCQUFBLEVBQ2hCLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNMLE1BQU0sY0FYYSxtSEFZdkIsQ0FEVTtJQUVULElBQU0sS0FBSyxHQUFHLGFBQWEsQ0FBQyxNQUFNLElBQUksWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFBO0lBQ3hELElBQU0sZUFBZSxHQUFHLGFBQWEsQ0FBQyxZQUFZLENBQUMsU0FBUyxDQUFDLENBQUE7SUFDN0QsSUFBTSxZQUFZLEdBQUcsS0FBSyxJQUFJLENBQUMsQ0FBQTtJQUMvQixJQUFNLFVBQVUsR0FBRyxXQUFXLENBQUMsQ0FBQyxDQUFDLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUE7SUFDbkUsSUFBTSxlQUFlLEdBQUcsRUFBRSxtQkFBbUIsRUFBRSxhQUFhLENBQUMsZ0JBQWdCLElBQUksWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUE7SUFDckcsSUFBTSxtQkFBbUIsR0FBRyxHQUFHLENBQUE7SUFDL0IsSUFBTSw0QkFBNEIsR0FBRyxFQUFFLENBQUE7SUFFdkMsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixTQUFTLEVBQUU7WUFDVCxTQUFTLEVBQUUsYUFBYSxDQUFDLEtBQUssQ0FBQztTQUNoQztRQUNELEtBQUssRUFBRTtZQUNMLFNBQVMsRUFBRSxRQUFRO1lBQ25CLFFBQVEsRUFBRSxFQUFFO1lBQ1osVUFBVSxFQUFFLEtBQUs7WUFDakIsVUFBVSxFQUFFLENBQUM7U0FDZDtRQUNELFdBQVcsRUFBRTtZQUNYLFNBQVMsRUFBRSxRQUFRO1lBQ25CLFVBQVUsRUFBRSxLQUFLO1NBQ2xCO1FBQ0QsSUFBSSxFQUFFO1lBQ0osS0FBSyxFQUFFLG1CQUFtQjtZQUMxQixNQUFNLEVBQUUsbUJBQW1CO1lBQzNCLFlBQVksRUFBRSxFQUFFO1lBQ2hCLGVBQWUsRUFBRSxLQUFLO1NBQ3ZCO1FBQ0QsU0FBUyxFQUFFO1lBQ1QsS0FBSyxFQUFFLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO1lBQ3ZDLFNBQVMsRUFBRSxRQUFRO1lBQ25CLFFBQVEsRUFBRSxFQUFFO1lBQ1osVUFBVSxFQUFFLEtBQUs7U0FDbEI7UUFDRCxlQUFlLEVBQUU7WUFDZixLQUFLLEVBQUUsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7WUFDdkMsU0FBUyxFQUFFLFFBQVE7WUFDbkIsVUFBVSxFQUFFLEtBQUs7U0FDbEI7UUFDRCxXQUFXLEVBQUU7WUFDWCxVQUFVLEVBQUUsUUFBUTtZQUNwQixjQUFjLEVBQUUsUUFBUTtTQUN6QjtRQUNELFFBQVEsRUFBRTtZQUNSLEtBQUssRUFBRSxtQkFBbUI7WUFDMUIsTUFBTSxFQUFFLG1CQUFtQjtZQUMzQixZQUFZLEVBQUUsNEJBQTRCO1lBQzFDLGVBQWUsRUFBRSxhQUFhLENBQUMsWUFBWSxDQUFDLGFBQWEsQ0FBQztZQUMxRCxRQUFRLEVBQUUsUUFBUTtTQUNuQjtLQUNGLENBQUMsQ0FBQTtJQUVGLElBQU0sc0JBQXNCLEdBQUcsY0FBbUIsT0FBQSxDQUNoRCxvQkFBQyxhQUFhLGFBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxRQUFRLElBQU0sTUFBTTtRQUMvQyxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxHQUFJO1FBQzlCLFFBQVEsQ0FBQyxFQUFFLEtBQUssU0FBUyxJQUFJLENBQzVCLG9CQUFDLElBQUk7WUFDSCxvQkFBQyxNQUFNLElBQUMsRUFBRSxFQUFDLElBQUksRUFBQyxFQUFFLEVBQUMsSUFBSSxFQUFDLENBQUMsRUFBQyxJQUFJLEdBQUcsQ0FDNUIsQ0FDUixDQUNhLENBQ2pCLEVBVGlELENBU2pELENBQUE7SUFFRCxJQUFJLFFBQVEsRUFBRTtRQUNaLE9BQU8sb0JBQUMsc0JBQXNCLE9BQUcsQ0FBQTtLQUNsQztJQUVELElBQUksSUFBSSxFQUFFO1FBQ1IsT0FBTyxDQUNMLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLFNBQVM7WUFDM0Isb0JBQUMsSUFBSSxhQUFDLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsTUFBTSxDQUFDLFdBQVcsQ0FBQyxJQUFNLE1BQU07Z0JBQ3ZELEtBQUssSUFBSSxPQUFPLEtBQUssQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQzlDLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLFNBQVMsRUFBRSxLQUFLLEVBQUUsVUFBVSxDQUFDLEdBQUcsSUFDakQsS0FBSyxJQUFJLEVBQUUsQ0FDUCxDQUNSLENBQUMsQ0FBQyxDQUFDLENBQ0YsS0FBSyxDQUNOO2dCQUVBLFdBQVcsSUFBSSxPQUFPLFdBQVcsQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQzFELG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLGVBQWUsRUFBRSxLQUFLLEVBQUUsVUFBVSxDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsZUFBZSxDQUFDLGFBQWEsSUFDOUYsV0FBVyxJQUFJLEVBQUUsQ0FDYixDQUNSLENBQUMsQ0FBQyxDQUFDLENBQ0YsV0FBVyxDQUNaLENBQ0ksQ0FDRixDQUNSLENBQUE7S0FDRjtJQUVELE9BQU8sQ0FDTCxvQkFBQyxJQUFJLGFBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxTQUFTLElBQU0sTUFBTTtRQUN2QyxvQkFBQyx3QkFBd0IsYUFDdkIsSUFBSSxFQUFFLEVBQUUsRUFDUixLQUFLLEVBQUUsQ0FBQyxFQUNSLElBQUksRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxHQUFHLEVBQ2hDLFNBQVMsRUFBRSxLQUFLLEVBQ2hCLGVBQWUsRUFBRSxlQUFlLEVBQ2hDLFFBQVEsRUFBRSxDQUFDLElBQ1AsVUFBVSxFQUNWLGVBQWUsR0FFbEIsY0FBTSxPQUFBLENBQ0wsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsV0FBVztZQUM1QixLQUFLLElBQUksT0FBTyxLQUFLLENBQUMsT0FBTyxFQUFFLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUM5QyxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsQ0FBQyxHQUFHLElBQzdDLEtBQUssSUFBSSxFQUFFLENBQ1AsQ0FDUixDQUFDLENBQUMsQ0FBQyxDQUNGLG9CQUFDLElBQUksUUFBRSxLQUFLLENBQVEsQ0FDckI7WUFFQSxXQUFXLElBQUksT0FBTyxXQUFXLENBQUMsT0FBTyxFQUFFLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUMxRCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxXQUFXLEVBQUUsS0FBSyxFQUFFLFVBQVUsQ0FBQyxJQUFJLElBQ3BELFdBQVcsSUFBSSxFQUFFLENBQ2IsQ0FDUixDQUFDLENBQUMsQ0FBQyxDQUNGLG9CQUFDLElBQUksUUFBRSxXQUFXLENBQVEsQ0FDM0IsQ0FDSSxDQUNSLEVBbEJNLENBa0JOLENBQ3dCLENBQ3RCLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGNBQWMsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLGNBQWMsQ0FBQTtBQUV6RCxlQUFlLGNBQWMsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3NSYWRpYWwubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9wcm9ncmVzcy9yYWRpYWwvUHJvZ3Jlc3NSYWRpYWwubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sYUFBYSxFQUFFLEVBQUUsTUFBTSxFQUFFLE1BQU0sNkJBQTZCLENBQUE7QUFDbkUsT0FBTyxFQUFFLFFBQVEsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRXpELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSw2REFBNkQsQ0FBQTtBQUN0RyxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3BELE9BQU8sRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzFELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFcEU7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sY0FBYyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3JDLFVBQ0UsRUFZc0IsRUFDdEIsR0FBb0I7SUFabEIsSUFBQSxPQUFPLGFBQUEsRUFDUCxLQUFLLFdBQUEsRUFDTCxXQUFXLGlCQUFBLEVBQ1gsTUFBTSxZQUFBLEVBQ04sSUFBSSxVQUFBLEVBQ0osSUFBSSxVQUFBLEVBQ0osYUFBYSxtQkFBQSxFQUNiLFlBQVksa0JBQUEsRUFDWixLQUFLLFdBQUEsRUFDTCxRQUFRLGNBQUEsRUFDTCxNQUFNLGNBWFgsbUhBWUMsQ0FEVTtJQUlYLElBQU0sS0FBSyxHQUFHLGFBQWEsQ0FBQyxNQUFNLElBQUksWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFBO0lBQ3hELElB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

package/lib/components/progress/radial/ProgressRadialProps.d.ts

@@ -1,20 +1,21 @@
-import { AlignableProps, StatusProps, TrilogyColor, TrilogyColorValues } from '../../../objects';
 import React from 'react';
-import { ProgressRadialItemProps } from './item/ProgressRadialItemProps';
-import { CommonProps } from '../../../objects/facets/CommonProps';
+import { ProgressRadialItemProps } from '../../../components/progress/radial/item/ProgressRadialItemProps';
+import { AlignableProps } from '../../../objects/facets/Alignable';
+import { StatusProps, StatusState, StatusStateValues } from '../../../objects/facets/Status';
 /**
  * Progress Radial Interface
  */
-export interface ProgressRadialProps extends StatusProps, AlignableProps, CommonProps {
+export interface ProgressRadialProps extends StatusProps, AlignableProps {
     children?: React.ReactElement<ProgressRadialItemProps> | React.ReactNode;
+    percent?: number;
     label?: string | React.ReactNode;
-    value?: number;
-    valueColor?: TrilogyColor | TrilogyColorValues;
-    secondValue?: number;
-    secondValueColor?: TrilogyColor | TrilogyColorValues;
     description?: string | React.ReactNode;
+    className?: string;
     full?: boolean;
     disk?: boolean;
+    secondPercent?: number;
+    secondStatus?: StatusState | StatusStateValues;
     skeleton?: boolean;
+    stacked?: boolean;
     small?: boolean;
 }

package/lib/components/progress/radial/ProgressRadialPropsDefaults.js

@@ -14,6 +14,13 @@ export default {
       "JSXElementConstructor<any>>"
     ]
   },
+  "percent": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "number"
+    ]
+  },
   "label": {
     "type": "react",
     "values": [
@@ -28,61 +35,51 @@ export default {
       "ReactPortal"
     ]
   },
-  "value": {
+  "description": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "className": {
     "type": "string",
     "values": [
       "undefined",
-      "number"
+      "string"
     ]
   },
-  "valueColor": {
-    "type": "enum",
+  "full": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "SUCCESS",
-      "INFO",
-      "WARNING",
-      "ERROR",
-      "MAIN",
-      "ACCENT",
-      "WHITE",
-      "MAIN",
-      "MAIN_FADE",
-      "ACCENT",
-      "FONT",
-      "SUCCESS",
-      "SUCCESS_FADE",
-      "INFO",
-      "INFO_FADE",
-      "WARNING",
-      "WARNING_FADE",
-      "ERROR",
-      "ERROR_FADE",
-      "DISABLED",
-      "DISABLED_FADE",
-      "NEUTRAL",
-      "NEUTRAL_FADE",
-      "WHITE",
-      "MAIN_FADE",
-      "FONT",
-      "SUCCESS_FADE",
-      "INFO_FADE",
-      "WARNING_FADE",
-      "ERROR_FADE",
-      "DISABLED",
-      "DISABLED_FADE",
-      "NEUTRAL",
-      "NEUTRAL_FADE"
+      "false",
+      "true"
+    ]
+  },
+  "disk": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
     ]
   },
-  "secondValue": {
+  "secondPercent": {
     "type": "string",
     "values": [
       "undefined",
       "number"
     ]
   },
-  "secondValueColor": {
+  "secondStatus": {
     "type": "enum",
     "values": [
       "undefined",
@@ -90,61 +87,13 @@ export default {
       "INFO",
       "WARNING",
       "ERROR",
-      "MAIN",
-      "ACCENT",
-      "WHITE",
-      "MAIN",
-      "MAIN_FADE",
-      "ACCENT",
-      "FONT",
       "SUCCESS",
-      "SUCCESS_FADE",
       "INFO",
-      "INFO_FADE",
       "WARNING",
-      "WARNING_FADE",
-      "ERROR",
-      "ERROR_FADE",
-      "DISABLED",
-      "DISABLED_FADE",
-      "NEUTRAL",
-      "NEUTRAL_FADE",
-      "WHITE",
-      "MAIN_FADE",
-      "FONT",
-      "SUCCESS_FADE",
-      "INFO_FADE",
-      "WARNING_FADE",
-      "ERROR_FADE",
-      "DISABLED",
-      "DISABLED_FADE",
-      "NEUTRAL",
-      "NEUTRAL_FADE"
-    ]
-  },
-  "description": {
-    "type": "react",
-    "values": [
-      "undefined",
-      "null",
-      "string",
-      "number",
-      "false",
-      "true",
-      "JSXElementConstructor<any>>",
-      "ReactNode>",
-      "ReactPortal"
-    ]
-  },
-  "full": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
+      "ERROR"
     ]
   },
-  "disk": {
+  "skeleton": {
     "type": "boolean",
     "values": [
       "undefined",
@@ -152,7 +101,7 @@ export default {
       "true"
     ]
   },
-  "skeleton": {
+  "stacked": {
     "type": "boolean",
     "values": [
       "undefined",
@@ -212,12 +161,5 @@ export default {
       "ALIGNED_START",
       "ALIGNED_END"
     ]
-  },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
   }
 };

package/lib/components/progress/radial/hook/useProgressRadial.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface IParams {
+    percent: number;
+    secondPercent: number;
+}
+export declare const useProgressRadial: ({ percent, secondPercent }: IParams) => {
+    progressRadialRef: React.RefObject<HTMLDivElement>;
+    styleSSR?: undefined;
+} | {
+    styleSSR: {
+        background: string;
+    };
+    progressRadialRef?: undefined;
+};
+export {};

package/lib/components/progress/radial/hook/useProgressRadial.js

@@ -0,0 +1,57 @@
+import { __read } from "tslib";
+import React from 'react';
+import { getColorStyle } from '../../../../objects/facets/Color';
+export var useProgressRadial = function (_a) {
+    var percent = _a.percent, secondPercent = _a.secondPercent;
+    try {
+        var _b = __read(React.useState(0), 2), firstProgressCurrentValue_1 = _b[0], setFirstProgressCurrentValue_1 = _b[1];
+        var _c = __read(React.useState(0), 2), secondProgressCurrentValue_1 = _c[0], setSecondProgressCurrentValue_1 = _c[1];
+        var progressRadialRef_1 = React.useRef(null);
+        React.useEffect(function () {
+            var animationFrameId;
+            // Reset the current values whenever the provided percent or secondPercent change
+            setFirstProgressCurrentValue_1(0);
+            setSecondProgressCurrentValue_1(0);
+            updateBackgroundStyle(percent, secondPercent, progressRadialRef_1); // if percent or secondPercent are 0, update immediately
+            var frame = function () {
+                setFirstProgressCurrentValue_1(function (value) {
+                    return value < percent ? value + 1 : value;
+                });
+                setSecondProgressCurrentValue_1(function (value) {
+                    return value < secondPercent ? value + 1 : value;
+                });
+                animationFrameId = requestAnimationFrame(frame);
+            };
+            animationFrameId = requestAnimationFrame(frame);
+            // Cleanup
+            return function () { return cancelAnimationFrame(animationFrameId); };
+        }, [percent, secondPercent]);
+        React.useEffect(function () {
+            updateBackgroundStyle(firstProgressCurrentValue_1, secondProgressCurrentValue_1, progressRadialRef_1);
+        }, [firstProgressCurrentValue_1, secondProgressCurrentValue_1, progressRadialRef_1]);
+        return {
+            progressRadialRef: progressRadialRef_1,
+        };
+    }
+    catch (_d) {
+        return {
+            styleSSR: updateBackgroundStyle(percent, secondPercent),
+        };
+    }
+};
+var updateBackgroundStyle = function (firstValue, secondValue, progressRadialRef) {
+    var progressRadial = progressRadialRef === null || progressRadialRef === void 0 ? void 0 : progressRadialRef.current;
+    var firstProgressDegree = (360 * firstValue) / 100;
+    var secondProgressDegree = (360 * secondValue) / 100;
+    // Ensure the second progress starts where the first ends
+    var secondProgressStartDegree = firstProgressDegree;
+    var styleBackground;
+    styleBackground = "radial-gradient(circle at center, white 58%, transparent 58.1%),";
+    styleBackground += "conic-gradient(#0C7B91 0 ".concat(firstProgressDegree, "deg, ").concat(getColorStyle('MAIN'), " ").concat(secondProgressStartDegree, "deg ").concat(secondProgressStartDegree + secondProgressDegree, "deg, gainsboro ").concat(secondProgressStartDegree + secondProgressDegree, "deg 360deg)");
+    if (progressRadial)
+        progressRadial.style.background = styleBackground;
+    return {
+        background: "radial-gradient(circle at center, white 58%, transparent 58.1%), conic-gradient(#0C7B91 0 ".concat(firstProgressDegree, "deg, ").concat(getColorStyle('MAIN'), " ").concat(secondProgressStartDegree, "deg ").concat(secondProgressStartDegree + secondProgressDegree, "deg, gainsboro ").concat(secondProgressStartDegree + secondProgressDegree, "deg 360deg)"),
+    };
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlUHJvZ3Jlc3NSYWRpYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9ob29rL3VzZVByb2dyZXNzUmFkaWFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQU90RCxNQUFNLENBQUMsSUFBTSxpQkFBaUIsR0FBRyxVQUFDLEVBQW1DO1FBQWpDLE9BQU8sYUFBQSxFQUFFLGFBQWEsbUJBQUE7SUFDeEQsSUFBSTtRQUNJLElBQUEsS0FBQSxPQUE0RCxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQTVFLDJCQUF5QixRQUFBLEVBQUUsOEJBQTRCLFFBQXFCLENBQUE7UUFDN0UsSUFBQSxLQUFBLE9BQThELEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUEsRUFBOUUsNEJBQTBCLFFBQUEsRUFBRSwrQkFBNkIsUUFBcUIsQ0FBQTtRQUVyRixJQUFNLG1CQUFpQixHQUFHLEtBQUssQ0FBQyxNQUFNLENBQWlCLElBQUksQ0FBQyxDQUFBO1FBRTVELEtBQUssQ0FBQyxTQUFTLENBQUM7WUFDZCxJQUFJLGdCQUFxQixDQUFBO1lBRXpCLGlGQUFpRjtZQUNqRiw4QkFBNEIsQ0FBQyxDQUFDLENBQUMsQ0FBQTtZQUMvQiwrQkFBNkIsQ0FBQyxDQUFDLENBQUMsQ0FBQTtZQUNoQyxxQkFBcUIsQ0FBQyxPQUFPLEVBQUUsYUFBYSxFQUFFLG1CQUFpQixDQUFDLENBQUEsQ0FBQyx3REFBd0Q7WUFFekgsSUFBTSxLQUFLLEdBQUc7Z0JBQ1osOEJBQTRCLENBQUMsVUFBQyxLQUFLO29CQUNqQyxPQUFPLEtBQUssR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQTtnQkFDNUMsQ0FBQyxDQUFDLENBQUE7Z0JBQ0YsK0JBQTZCLENBQUMsVUFBQyxLQUFLO29CQUNsQyxPQUFPLEtBQUssR0FBRyxhQUFhLENBQUMsQ0FBQyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQTtnQkFDbEQsQ0FBQyxDQUFDLENBQUE7Z0JBQ0YsZ0JBQWdCLEdBQUcscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUE7WUFDakQsQ0FBQyxDQUFBO1lBRUQsZ0JBQWdCLEdBQUcscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUE7WUFFL0MsVUFBVTtZQUNWLE9BQU8sY0FBTSxPQUFBLG9CQUFvQixDQUFDLGdCQUFnQixDQUFDLEVBQXRDLENBQXNDLENBQUE7UUFDckQsQ0FBQyxFQUFFLENBQUMsT0FBTyxFQUFFLGFBQWEsQ0FBQyxDQUFDLENBQUE7UUFFNUIsS0FBSyxDQUFDLFNBQVMsQ0FBQztZQUNkLHFCQUFxQixDQUFDLDJCQUF5QixFQUFFLDRCQUEwQixFQUFFLG1CQUFpQixDQUFDLENBQUE7UUFDakcsQ0FBQyxFQUFFLENBQUMsMkJBQXlCLEVBQUUsNEJBQTBCLEVBQUUsbUJBQWlCLENBQUMsQ0FBQyxDQUFBO1FBRTlFLE9BQU87WUFDTCxpQkFBaUIscUJBQUE7U0FDbEIsQ0FBQTtLQUNGO0lBQUMsV0FBTTtRQUNOLE9BQU87WUFDTCxRQUFRLEVBQUUscUJBQXFCLENBQUMsT0FBTyxFQUFFLGFBQWEsQ0FBQztTQUN4RCxDQUFBO0tBQ0Y7QUFDSCxDQUFDLENBQUE7QUFFRCxJQUFNLHFCQUFxQixHQUFHLFVBQzVCLFVBQWtCLEVBQ2xCLFdBQW1CLEVBQ25CLGlCQUFtRDtJQUVuRCxJQUFNLGNBQWMsR0FBRyxpQkFBaUIsYUFBakIsaUJBQWlCLHVCQUFqQixpQkFBaUIsQ0FBRSxPQUFPLENBQUE7SUFDakQsSUFBTSxtQkFBbUIsR0FBRyxDQUFDLEdBQUcsR0FBRyxVQUFVLENBQUMsR0FBRyxHQUFHLENBQUE7SUFDcEQsSUFBTSxvQkFBb0IsR0FBRyxDQUFDLEdBQUcsR0FBRyxXQUFXLENBQUMsR0FBRyxHQUFHLENBQUE7SUFFdEQseURBQXlEO0lBQ3pELElBQU0seUJBQXlCLEdBQUcsbUJBQW1CLENBQUE7SUFFckQsSUFBSSxlQUFlLENBQUE7SUFDbkIsZUFBZSxHQUFHLGtFQUFrRSxDQUFBO0lBQ3BGLGVBQWUsSUFBSSxtQ0FBNEIsbUJBQW1CLGtCQUFRLGFBQWEsQ0FDckYsTUFBTSxDQUNQLGNBQUkseUJBQXlCLGlCQUFPLHlCQUF5QixHQUFHLG9CQUFvQiw0QkFDbkYseUJBQXlCLEdBQUcsb0JBQW9CLGdCQUNyQyxDQUFBO0lBRWIsSUFBSSxjQUFjO1FBQUUsY0FBYyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsZUFBZSxDQUFBO0lBRXJFLE9BQU87UUFDTCxVQUFVLEVBQUUsb0dBQTZGLG1CQUFtQixrQkFBUSxhQUFhLENBQy9JLE1BQU0sQ0FDUCxjQUFJLHlCQUF5QixpQkFBTyx5QkFBeUIsR0FBRyxvQkFBb0IsNEJBQ25GLHlCQUF5QixHQUFHLG9CQUFvQixnQkFDckM7S0FDZCxDQUFBO0FBQ0gsQ0FBQyxDQUFBIn0=

package/lib/components/progress/radial/index.d.ts

@@ -1,2 +1,2 @@
-import ProgressRadial from './ProgressRadial';
+import ProgressRadial from '../../../components/progress/radial/ProgressRadial';
 export default ProgressRadial;

package/lib/components/progress/radial/index.js

@@ -1,3 +1,3 @@
-import ProgressRadial from './ProgressRadial';
+import ProgressRadial from '../../../components/progress/radial/ProgressRadial';
 export default ProgressRadial;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLGNBQWMsTUFBTSxrQkFBa0IsQ0FBQTtBQUU3QyxlQUFlLGNBQWMsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLGNBQWMsTUFBTSw2Q0FBNkMsQ0FBQTtBQUV4RSxlQUFlLGNBQWMsQ0FBQSJ9

package/lib/components/progress/radial/item/ProgressRadialItemProps.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { TrilogyColor } from '../../../../objects';
-import { CommonProps } from '../../../../objects/facets/CommonProps';
-export interface ProgressRadialItemProps extends CommonProps {
+import { TrilogyColor } from '../../../../objects/facets/Color';
+export interface ProgressRadialItemProps {
     children?: React.ReactNode;
     percent: number;
+    className?: string;
     color: 'secondary' | 'warning' | 'empty' | 'tertiary' | TrilogyColor;
 }

package/lib/components/progress/radial/item/ProgressRadialItemPropsDefaults.js

@@ -17,6 +17,13 @@ export default {
     "type": "string",
     "values": []
   },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "color": {
     "type": "enum",
     "values": [
@@ -42,19 +49,5 @@ export default {
       "empty",
       "tertiary"
     ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
   }
 };