wini-web-components 2.2.4 → 2.2.6

package/dist/component/import-file/import-file.d.ts

@@ -1,17 +1,18 @@
 import React, { CSSProperties } from 'react';
 import { ComponentStatus } from '../component-status';
-interface ObjWithKnownKeys {
-    [k: string]: any;
-}
 interface ImportFileState {
     status?: ComponentStatus;
-    preview: File | ObjWithKnownKeys | undefined | null;
+    preview: File | {
+        [k: string]: any;
+    } | undefined | null;
 }
 type ChangeFileFunction = (a?: File) => void;
 interface ImportFileProps {
     id?: string;
     status?: ComponentStatus;
-    value?: File | ObjWithKnownKeys;
+    value?: File | {
+        [k: string]: any;
+    };
     buttonOnly?: boolean;
     onChange?: ChangeFileFunction;
     label?: string;

package/dist/component/import-file/import-file.js

@@ -41,9 +41,6 @@ var fileSvg = (react_1.default.createElement("svg", { className: import_file_mod
     react_1.default.createElement("path", { d: 'M29.9264 10.7084H23.3469V4.12884L29.9264 10.7084Z', style: { fill: "var(--primary-main-color)" } })));
 var closeSvg = (react_1.default.createElement("svg", { width: '100%', height: '100%', style: { width: '2.4rem', height: '2.4rem' }, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
     react_1.default.createElement("path", { d: 'M13.4144 12.0002L20.4144 5.00015L19.0002 3.58594L12.0002 10.5859L5.00015 3.58594L3.58594 5.00015L10.5859 12.0002L3.58594 19.0002L5.00015 20.4144L12.0002 13.4144L19.0002 20.4144L20.4144 19.0002L13.4144 12.0002Z', style: { fill: "var(--error-main-color)" } })));
-var uploadSvg = (react_1.default.createElement("svg", { width: '100%', height: '100%', style: { width: '1.4rem', height: '1.4rem' }, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-    react_1.default.createElement("path", { d: 'M3.66732 3.88889L7.00065 0L10.334 3.88889H7.55621V8.88889H6.4451V3.88889H3.66732Z', style: { fill: "var(--neutral-text-subtitle-color)" } }),
-    react_1.default.createElement("path", { d: 'M12.5562 11.1111H1.4451V7.77778H0.333984V11.6667C0.333984 11.9733 0.582873 12.2222 0.88954 12.2222H13.1118C13.4184 12.2222 13.6673 11.9733 13.6673 11.6667V7.77778H12.5562V11.1111Z', style: { fill: "var(--neutral-text-subtitle-color)" } })));
 var ImportFile = /** @class */ (function (_super) {
     __extends(ImportFile, _super);
     function ImportFile(props) {

package/dist/component/number-picker/number-picker.d.ts

@@ -0,0 +1,19 @@
+import React, { CSSProperties } from "react";
+interface Props {
+    id?: string;
+    value?: number;
+    onChange?: (ev: number) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    helperText?: string;
+    helperTextColor?: string;
+    /** default: 1 */
+    volume?: number;
+    style?: CSSProperties;
+    min?: number;
+    max?: number;
+    type?: "outline" | "icon-button";
+}
+export declare const NumberPicker: ({ id, value, onChange, disabled, readOnly, className, helperText, helperTextColor, max, min, style, type, volume }: Props) => React.JSX.Element;
+export {};

package/dist/component/number-picker/number-picker.js

@@ -0,0 +1,127 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberPicker = void 0;
+var react_1 = __importStar(require("react"));
+var number_picker_module_css_1 = __importDefault(require("./number-picker.module.css"));
+var NumberPicker = function (_a) {
+    var id = _a.id, value = _a.value, onChange = _a.onChange, disabled = _a.disabled, readOnly = _a.readOnly, className = _a.className, helperText = _a.helperText, helperTextColor = _a.helperTextColor, max = _a.max, min = _a.min, style = _a.style, _b = _a.type, type = _b === void 0 ? "icon-button" : _b, _c = _a.volume, volume = _c === void 0 ? 1 : _c;
+    var _d = (0, react_1.useState)(0), val = _d[0], setValue = _d[1];
+    var inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (inputRef.current) {
+            setValue(value !== null && value !== void 0 ? value : 0);
+            inputRef.current.value = "".concat(value !== null && value !== void 0 ? value : 0);
+        }
+    }, [value, inputRef]);
+    return react_1.default.createElement("div", { id: id, className: "row ".concat(number_picker_module_css_1.default["number-picker-container"], " ").concat(className !== null && className !== void 0 ? className : "body-2", " ").concat((helperText === null || helperText === void 0 ? void 0 : helperText.length) && number_picker_module_css_1.default['helper-text']), "number-picker-type": type !== null && type !== void 0 ? type : "icon-button", "helper-text": helperText, style: style ? __assign(__assign({}, { '--helper-text-color': helperTextColor !== null && helperTextColor !== void 0 ? helperTextColor : '#e14337' }), style) : { '--helper-text-color': helperTextColor !== null && helperTextColor !== void 0 ? helperTextColor : '#e14337' } },
+        react_1.default.createElement("div", { className: "row", onClick: function () {
+                var newValue = val - volume;
+                if (min === undefined || newValue >= min) {
+                    if (volume % 1 === 0)
+                        newValue = Math.round(newValue);
+                    else
+                        newValue = parseFloat(newValue.toFixed(1));
+                    setValue(newValue);
+                    if (inputRef.current)
+                        inputRef.current.value = "".concat(newValue);
+                    if (onChange)
+                        onChange(newValue);
+                }
+            } },
+            react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.3335 7.93907C1.3335 7.60435 1.60484 7.33301 1.93956 7.33301H14.0608C14.3955 7.33301 14.6668 7.60435 14.6668 7.93907C14.6668 8.27379 14.3955 8.54513 14.0608 8.54513H1.93956C1.60484 8.54513 1.3335 8.27379 1.3335 7.93907Z" }))),
+        react_1.default.createElement("input", { ref: inputRef, readOnly: readOnly, disabled: disabled, onKeyDown: function (ev) {
+                switch (ev.key.toLowerCase()) {
+                    case "enter":
+                        ev.target.blur();
+                        break;
+                    default:
+                        break;
+                }
+            }, onFocus: function (ev) { ev.target.select(); }, onBlur: function (ev) {
+                var newValue = volume % 1 === 0 ? parseInt(ev.target.value.trim()) : parseFloat(ev.target.value.trim());
+                if (isNaN(newValue))
+                    ev.target.value = "".concat(val);
+                else {
+                    if (volume % 1 === 0)
+                        newValue = Math.round(newValue);
+                    else
+                        newValue = parseFloat(newValue.toFixed(1));
+                    if (min !== undefined && newValue < min) {
+                        setValue(min);
+                        if (inputRef.current)
+                            inputRef.current.value = "".concat(min);
+                        if (onChange)
+                            onChange(min);
+                    }
+                    else if (max !== undefined && newValue > max) {
+                        setValue(max);
+                        if (inputRef.current)
+                            inputRef.current.value = "".concat(max);
+                        if (onChange)
+                            onChange(max);
+                    }
+                    else {
+                        setValue(newValue);
+                        if (inputRef.current)
+                            inputRef.current.value = "".concat(newValue);
+                        if (onChange)
+                            onChange(newValue);
+                    }
+                }
+            } }),
+        react_1.default.createElement("div", { className: "row", onClick: function () {
+                var newValue = val + volume;
+                if (max === undefined || newValue <= max) {
+                    if (volume % 1 === 0)
+                        newValue = Math.round(newValue);
+                    else
+                        newValue = parseFloat(newValue.toFixed(1));
+                    setValue(newValue);
+                    if (inputRef.current)
+                        inputRef.current.value = "".concat(newValue);
+                    if (onChange)
+                        onChange(newValue);
+                }
+            } },
+            react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("path", { d: "M8.60622 1.93907C8.60622 1.60435 8.33488 1.33301 8.00016 1.33301C7.66544 1.33301 7.3941 1.60435 7.3941 1.93907V7.39361H1.93956C1.60484 7.39361 1.3335 7.66496 1.3335 7.99967C1.3335 8.33439 1.60484 8.60574 1.93956 8.60574H7.3941V14.0603C7.3941 14.395 7.66544 14.6663 8.00016 14.6663C8.33488 14.6663 8.60622 14.395 8.60622 14.0603V8.60574H14.0608C14.3955 8.60574 14.6668 8.33439 14.6668 7.99967C14.6668 7.66496 14.3955 7.39361 14.0608 7.39361H8.60622V1.93907Z" }))));
+};
+exports.NumberPicker = NumberPicker;

package/dist/component/pagination/pagination.js

@@ -55,7 +55,7 @@ function Pagination(_a) {
                         onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
                     } }),
                 react_1.default.createElement(text_1.Text, { className: "body-3" },
-                    "of $",
+                    "of ",
                     totalItem,
                     " items")),
             react_1.default.createElement("div", { style: { flex: 1 } }),

package/dist/component/popup/popup.d.ts

@@ -3,20 +3,22 @@ import './popup.css';
 interface PopupState {
     readonly open?: boolean;
     heading?: ReactNode;
+    body?: ReactNode;
     content?: ReactNode;
     footer?: ReactNode;
     clickOverlayClosePopup?: boolean;
     style?: CSSProperties;
     hideButtonClose?: boolean;
 }
-export declare const showPopup: ({ ref, heading, content, footer, clickOverlayClosePopup, style, hideButtonClose }: {
+export declare const showPopup: (props: {
     ref: React.MutableRefObject<Popup | undefined>;
     heading?: ReactNode;
     content?: ReactNode;
+    body?: ReactNode;
     footer?: ReactNode;
-    clickOverlayClosePopup?: boolean | undefined;
-    style?: React.CSSProperties | undefined;
-    hideButtonClose?: boolean | undefined;
+    clickOverlayClosePopup?: boolean;
+    style?: CSSProperties;
+    hideButtonClose?: boolean;
 }) => void;
 export declare const closePopup: (ref: React.MutableRefObject<Popup>) => void;
 export declare class Popup extends React.Component<Object, PopupState> {

package/dist/component/popup/popup.js

@@ -33,16 +33,16 @@ exports.Popup = exports.closePopup = exports.showPopup = void 0;
 var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 require("./popup.css");
-var showPopup = function (_a) {
-    var _b;
-    var ref = _a.ref, heading = _a.heading, content = _a.content, footer = _a.footer, clickOverlayClosePopup = _a.clickOverlayClosePopup, style = _a.style, hideButtonClose = _a.hideButtonClose;
-    (_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.onOpen({
-        heading: heading,
-        content: content,
-        footer: footer,
-        clickOverlayClosePopup: clickOverlayClosePopup,
-        style: style,
-        hideButtonClose: hideButtonClose
+var showPopup = function (props) {
+    var _a, _b;
+    (_b = (_a = props.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.onOpen({
+        heading: props.heading,
+        content: props.content,
+        body: props.body,
+        footer: props.footer,
+        clickOverlayClosePopup: props.clickOverlayClosePopup,
+        style: props.style,
+        hideButtonClose: props.hideButtonClose
     });
 };
 exports.showPopup = showPopup;
@@ -87,18 +87,18 @@ var Popup = /** @class */ (function (_super) {
     };
     Popup.prototype.render = function () {
         var _this = this;
+        var _a;
         return (react_1.default.createElement(react_1.default.Fragment, null, this.state.open &&
             react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "popup-overlay ".concat(this.state.clickOverlayClosePopup ? 'hidden-overlay' : ''), onClick: this.state.clickOverlayClosePopup ? function (ev) {
                     if (ev.target.classList.contains('popup-overlay'))
                         _this.onClose();
-                } : undefined },
-                react_1.default.createElement("div", { ref: this.ref, className: 'popup-container col', onClick: function (e) { return e.stopPropagation(); }, style: this.state.style },
-                    this.state.heading,
-                    this.state.content,
-                    this.state.footer,
-                    this.state.hideButtonClose ? null : react_1.default.createElement("button", { type: 'button', onClick: function () { return _this.onClose(); }, className: 'popup-close-btn row' },
-                        react_1.default.createElement("svg", { width: '100%', height: '100%', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { width: '2rem', height: '2rem' } },
-                            react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z', fill: '#00204D', fillOpacity: 0.6 }))))), document.body)));
+                } : undefined }, (_a = this.state.content) !== null && _a !== void 0 ? _a : react_1.default.createElement("div", { ref: this.ref, className: 'popup-container col', onClick: function (e) { return e.stopPropagation(); }, style: this.state.style },
+                this.state.heading,
+                this.state.body,
+                this.state.footer,
+                this.state.hideButtonClose ? null : react_1.default.createElement("button", { type: 'button', onClick: function () { return _this.onClose(); }, className: 'popup-close-btn row' },
+                    react_1.default.createElement("svg", { width: '100%', height: '100%', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { width: '2rem', height: '2rem' } },
+                        react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z', fill: '#00204D', fillOpacity: 0.6 }))))), document.body)));
     };
     return Popup;
 }(react_1.default.Component));

package/dist/component/progress-bar/progress-bar.d.ts

@@ -1,5 +1,4 @@
 import { CSSProperties, ReactNode } from 'react';
-import './progress-bar.css';
 import React from 'react';
 import { ComponentStatus } from '../../index';
 export declare function ProgressBar({ id, status, percent, titleText, title, hideTitle, progressBarOnly, fullColor, percentColor, style, progressBarStyle }: {

package/dist/component/progress-bar/progress-bar.js

@@ -16,21 +16,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressBar = void 0;
 var react_1 = require("react");
-require("./progress-bar.css");
+var progress_bar_module_css_1 = __importDefault(require("./progress-bar.module.css"));
 var react_2 = __importDefault(require("react"));
 var index_1 = require("../../index");
 function ProgressBar(_a) {
-    var id = _a.id, _b = _a.status, status = _b === void 0 ? index_1.ComponentStatus.INFOR : _b, _c = _a.percent, percent = _c === void 0 ? 100 : _c, titleText = _a.titleText, title = _a.title, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.progressBarOnly, progressBarOnly = _e === void 0 ? false : _e, _f = _a.fullColor, fullColor = _f === void 0 ? 'var(--neutral-main-background-color)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--infor-main-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
+    var id = _a.id, _b = _a.status, status = _b === void 0 ? index_1.ComponentStatus.INFOR : _b, _c = _a.percent, percent = _c === void 0 ? 100 : _c, titleText = _a.titleText, title = _a.title, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.progressBarOnly, progressBarOnly = _e === void 0 ? false : _e, _f = _a.fullColor, fullColor = _f === void 0 ? 'var(--neutral-main-background-color)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--primary-main-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
     var _h = (0, react_1.useState)(true), openDetails = _h[0], setOpenDetails = _h[1];
-    return react_2.default.createElement("div", { id: id, className: "progress-bar-container col", style: style ? __assign({ padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }, style) : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' } },
-        (hideTitle || progressBarOnly) ? null : (title !== null && title !== void 0 ? title : react_2.default.createElement("div", { className: "progress-bar-title row" },
-            react_2.default.createElement("div", { className: "heading-text" }, titleText),
-            react_2.default.createElement("button", { type: "button", className: "suffix-action", onClick: function () { setOpenDetails(!openDetails); } },
-                react_2.default.createElement(index_1.Winicon, { src: openDetails ? "fill/arrows/down-arrow" : "fill/arrows/up-arrow" })))),
-        openDetails ? react_2.default.createElement("div", { className: 'progress-bar-tile row' },
-            react_2.default.createElement("div", { className: "progress-bar-value", style: __assign({ '--percent-color': percentColor, '--full-color': fullColor, '--percent': "".concat(percent, "%") }, (progressBarStyle !== null && progressBarStyle !== void 0 ? progressBarStyle : {})) }),
-            progressBarOnly || status === index_1.ComponentStatus.INFOR ? null : react_2.default.createElement("div", { className: 'status-icon' }, (0, index_1.getStatusIcon)(status)),
-            progressBarOnly ? null : react_2.default.createElement("div", { className: 'text-value' },
+    return react_2.default.createElement("div", { id: id, className: "col ".concat(progress_bar_module_css_1.default["progress-bar-container"]), style: style ? __assign({ padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }, style) : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' } },
+        (hideTitle || progressBarOnly) ? null : (title !== null && title !== void 0 ? title : react_2.default.createElement("div", { className: "row ".concat(progress_bar_module_css_1.default["progress-bar-title"]) },
+            react_2.default.createElement("div", { className: "heading-8" }, titleText),
+            react_2.default.createElement(index_1.Winicon, { src: openDetails ? "fill/arrows/down-arrow" : "fill/arrows/up-arrow", onClick: function () { setOpenDetails(!openDetails); } }))),
+        openDetails ? react_2.default.createElement("div", { className: "row ".concat(progress_bar_module_css_1.default["progress-bar-tile"]) },
+            react_2.default.createElement("div", { className: progress_bar_module_css_1.default["progress-bar-value"], style: __assign({ '--percent-color': percentColor, '--full-color': fullColor, '--percent': "".concat(percent, "%") }, (progressBarStyle !== null && progressBarStyle !== void 0 ? progressBarStyle : {})) }),
+            progressBarOnly || status === index_1.ComponentStatus.INFOR ? null : react_2.default.createElement("div", { className: "".concat(progress_bar_module_css_1.default["status-icon"]) }, (0, index_1.getStatusIcon)(status)),
+            progressBarOnly ? null : react_2.default.createElement("div", { className: 'label-4' },
                 percent,
                 "/100")) : null);
 }

package/dist/component/progress-circle/progress-circle.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import './progress-circle.css';
 import React from 'react';
-export declare function ProgressCircle({ id, percent, style, fillColor, percentColor, strokeWidth, strokeColor, textStyle }: {
+export declare function ProgressCircle(props: {
     id?: string;
     /** value:  0 - 100 (%)*/
     percent?: number;

package/dist/component/progress-circle/progress-circle.js

@@ -17,15 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressCircle = void 0;
 require("./progress-circle.css");
 var react_1 = __importDefault(require("react"));
-function ProgressCircle(_a) {
-    var id = _a.id, percent = _a.percent, style = _a.style, fillColor = _a.fillColor, percentColor = _a.percentColor, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, textStyle = _a.textStyle;
-    var radius = 30 - (strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : 4);
+function ProgressCircle(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var radius = 30 - ((_a = props.strokeWidth) !== null && _a !== void 0 ? _a : 4);
     var diameter = Math.PI * 2 * radius;
-    var strokeOffset = (1 - ((percent !== null && percent !== void 0 ? percent : 0) / 100)) * diameter;
-    return react_1.default.createElement("svg", { id: id, width: "100%", height: "100%", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: __assign({ width: 60, height: 60 }, (style !== null && style !== void 0 ? style : {})) },
-        react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: "none", stroke: strokeColor !== null && strokeColor !== void 0 ? strokeColor : "#E6EAF0", strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : '4px', } }),
-        react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: fillColor !== null && fillColor !== void 0 ? fillColor : "none", stroke: percentColor !== null && percentColor !== void 0 ? percentColor : "var(--infor-main-color)", strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : '4px', strokeLinecap: 'round', strokeDasharray: "".concat(diameter, "px ").concat(diameter, "px"), strokeDashoffset: "".concat(strokeOffset, "px") } }),
-        react_1.default.createElement("text", { x: "50%", y: "50%", fill: "#00204D", dy: ".3em", textAnchor: "middle", fontSize: 16, fontWeight: '600', style: textStyle }, percent !== null && percent !== void 0 ? percent : 0,
+    var strokeOffset = (1 - (((_b = props.percent) !== null && _b !== void 0 ? _b : 0) / 100)) * diameter;
+    return react_1.default.createElement("svg", { id: props.id, width: "100%", height: "100%", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: __assign({ width: '6rem', height: '6rem' }, ((_c = props.style) !== null && _c !== void 0 ? _c : {})) },
+        react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: "none", stroke: (_d = props.strokeColor) !== null && _d !== void 0 ? _d : "var(--neutral-main-background-color)", strokeWidth: (_e = props.strokeWidth) !== null && _e !== void 0 ? _e : '4px', } }),
+        react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: (_f = props.fillColor) !== null && _f !== void 0 ? _f : "none", stroke: (_g = props.percentColor) !== null && _g !== void 0 ? _g : "var(--primary-main-color)", strokeWidth: (_h = props.strokeWidth) !== null && _h !== void 0 ? _h : '4px', strokeLinecap: 'round', strokeDasharray: "".concat(diameter, "px ").concat(diameter, "px"), strokeDashoffset: "".concat(strokeOffset, "px") } }),
+        react_1.default.createElement("text", { x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", fontSize: "1.6rem", fontWeight: '600', style: __assign({ fill: "var(neutral-text-title-color)" }, ((_j = props.textStyle) !== null && _j !== void 0 ? _j : {})) }, (_k = props.percent) !== null && _k !== void 0 ? _k : 0,
             "%"));
 }
 exports.ProgressCircle = ProgressCircle;

package/dist/component/text-area/text-area.d.ts

@@ -21,6 +21,8 @@ interface TextAreaProps {
     register?: UseFormRegister<{}>;
 }
 export declare class TextArea extends React.Component<TextAreaProps> {
+    private containerRef;
+    getTextarea: () => HTMLTextAreaElement | null | undefined;
     render(): React.ReactNode;
 }
 export {};

package/dist/component/text-area/text-area.js

@@ -25,21 +25,47 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 require("./text-area.css");
 var TextArea = /** @class */ (function (_super) {
     __extends(TextArea, _super);
     function TextArea() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.containerRef = (0, react_1.createRef)();
+        _this.getTextarea = function () {
+            var _a;
+            return (_a = _this.containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("textarea");
+        };
+        return _this;
     }
     TextArea.prototype.render = function () {
         var _a, _b, _c, _d;
-        return react_1.default.createElement("div", { id: this.props.id, className: "text-area-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' } }, this.props.register ?
+        return react_1.default.createElement("div", { ref: this.containerRef, id: this.props.id, className: "text-area-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' } }, this.props.register ?
             react_1.default.createElement("textarea", __assign({ autoFocus: this.props.autoFocus }, this.props.register, { maxLength: this.props.maxLength, name: this.props.name, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onFocus: this.props.onFocus })) : react_1.default.createElement("textarea", { autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, defaultValue: this.props.defaultValue, value: this.props.value, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onChange: this.props.onChange, onFocus: this.props.onFocus, onBlur: this.props.onBlur }));
     };
     return TextArea;