wini-web-components 2.2.8 → 2.3.2

package/dist/component/popup/popup.js

@@ -1,105 +1,138 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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 (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;
-var closePopup = function (ref) {
-    ref.current.onClose();
-};
-exports.closePopup = closePopup;
-var Popup = /** @class */ (function (_super) {
-    __extends(Popup, _super);
-    function Popup(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            open: false,
-        };
-        _this.ref = react_1.default.createRef();
-        return _this;
-    }
-    Popup.prototype.onOpen = function (data) {
-        this.setState(__assign({ open: true }, data));
-    };
-    Popup.prototype.onClose = function () {
-        this.setState({ open: false });
-    };
-    Popup.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a;
-        if (prevState.open !== this.state.open && this.state.open && this.state.style) {
-            var thisPopupRect = (_a = this.ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (thisPopupRect) {
-                var style = void 0;
-                if (thisPopupRect.right > document.body.offsetWidth) {
-                    style = __assign(__assign({}, this.state.style), { right: '0.4rem' });
-                    delete style.left;
-                }
-                if (thisPopupRect.bottom > document.body.offsetHeight) {
-                    style = style ? __assign(__assign({}, style), { bottom: '0.4rem' }) : __assign(__assign({}, this.state.style), { bottom: '0.4rem' });
-                    delete style.top;
-                }
-                if (style)
-                    this.setState(__assign(__assign({}, this.state), { style: style }));
-            }
-        }
-    };
-    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 }, (_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));
-exports.Popup = Popup;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.Popup = exports.closePopup = exports.showPopup = void 0;
+var react_1 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+require("./popup.css");
+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;
+var closePopup = function (ref) {
+    ref.current.onClose();
+};
+exports.closePopup = closePopup;
+var Popup = /** @class */ (function (_super) {
+    __extends(Popup, _super);
+    function Popup(props) {
+        var _this = _super.call(this, props) || this;
+        _this.ref = (0, react_1.createRef)();
+        _this.state = {
+            open: false,
+        };
+        return _this;
+    }
+    Popup.prototype.onOpen = function (data) {
+        this.setState(__assign({ open: true }, data));
+    };
+    Popup.prototype.onClose = function () {
+        this.setState({ open: false });
+    };
+    Popup.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        if (prevState.open !== this.state.open && this.state.open && this.state.style) {
+            var thisPopupRect = (_a = this.ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (thisPopupRect) {
+                var style = void 0;
+                if (thisPopupRect.right > document.body.offsetWidth) {
+                    style = __assign(__assign({}, this.state.style), { right: '0.4rem' });
+                    delete style.left;
+                }
+                if (thisPopupRect.bottom > document.body.offsetHeight) {
+                    style = style ? __assign(__assign({}, style), { bottom: '0.4rem' }) : __assign(__assign({}, this.state.style), { bottom: '0.4rem' });
+                    delete style.top;
+                }
+                if (style)
+                    this.setState(__assign(__assign({}, this.state), { style: style }));
+            }
+        }
+    };
+    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 }, (_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));
+exports.Popup = Popup;

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

@@ -1,16 +1,16 @@
-import { CSSProperties, ReactNode } from 'react';
-import React from 'react';
-import { ComponentStatus } from '../../index';
-export declare function ProgressBar({ id, status, percent, titleText, title, hideTitle, progressBarOnly, fullColor, percentColor, style, progressBarStyle }: {
-    id?: string;
-    percent: number;
-    titleText?: string;
-    title?: ReactNode;
-    hideTitle: boolean;
-    progressBarOnly: boolean;
-    fullColor: string;
-    percentColor: string;
-    style?: CSSProperties;
-    status: ComponentStatus;
-    progressBarStyle?: CSSProperties;
-}): React.JSX.Element;
+import { CSSProperties, ReactNode } from 'react';
+import React from 'react';
+import { ComponentStatus } from '../../index';
+export declare function ProgressBar({ id, status, percent, titleText, title, hideTitle, progressBarOnly, fullColor, percentColor, style, progressBarStyle }: {
+    id?: string;
+    percent: number;
+    titleText?: string;
+    title?: ReactNode;
+    hideTitle: boolean;
+    progressBarOnly: boolean;
+    fullColor: string;
+    percentColor: string;
+    style?: CSSProperties;
+    status: ComponentStatus;
+    progressBarStyle?: CSSProperties;
+}): React.JSX.Element;

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

@@ -1,36 +1,35 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressBar = void 0;
-var react_1 = require("react");
-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(--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: "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);
-}
-exports.ProgressBar = ProgressBar;
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar = ProgressBar;
+var react_1 = require("react");
+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(--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: "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,14 +1,14 @@
-import { CSSProperties } from 'react';
-import './progress-circle.css';
-import React from 'react';
-export declare function ProgressCircle(props: {
-    id?: string;
-    /** value:  0 - 100 (%)*/
-    percent?: number;
-    style?: CSSProperties;
-    fillColor?: string;
-    percentColor?: string;
-    strokeWidth?: number;
-    strokeColor?: string;
-    textStyle?: CSSProperties;
-}): React.JSX.Element;
+import { CSSProperties } from 'react';
+import './progress-circle.css';
+import React from 'react';
+export declare function ProgressCircle(props: {
+    id?: string;
+    /** value:  0 - 100 (%)*/
+    percent?: number;
+    style?: CSSProperties;
+    fillColor?: string;
+    percentColor?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+    textStyle?: CSSProperties;
+}): React.JSX.Element;

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

@@ -1,31 +1,30 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressCircle = void 0;
-require("./progress-circle.css");
-var react_1 = __importDefault(require("react"));
-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 - (((_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;
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressCircle = ProgressCircle;
+require("./progress-circle.css");
+var react_1 = __importDefault(require("react"));
+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 - (((_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,
+            "%"));
+}

package/dist/component/radio-button/radio-button.d.ts

@@ -1,20 +1,20 @@
-import React, { CSSProperties } from 'react';
-import { UseFormRegister } from 'react-hook-form';
-interface RadioButtonProps {
-    id?: string;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    value?: string | number | readonly string[];
-    disabled?: boolean;
-    style?: CSSProperties;
-    size?: number | string;
-    defaultChecked?: boolean;
-    name?: string;
-    activeColor?: string;
-    offColor?: string;
-    className?: string;
-    register?: UseFormRegister<{}>;
-}
-export declare class RadioButton extends React.Component<RadioButtonProps> {
-    render(): React.ReactNode;
-}
-export {};
+import React, { CSSProperties } from 'react';
+import { UseFormRegister } from 'react-hook-form';
+interface RadioButtonProps {
+    id?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    value?: string | number | readonly string[];
+    disabled?: boolean;
+    style?: CSSProperties;
+    size?: number | string;
+    defaultChecked?: boolean;
+    name?: string;
+    activeColor?: string;
+    offColor?: string;
+    className?: string;
+    register?: UseFormRegister<{}>;
+}
+export declare class RadioButton extends React.Component<RadioButtonProps> {
+    render(): React.ReactNode;
+}
+export {};

package/dist/component/radio-button/radio-button.js

@@ -1,64 +1,64 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioButton = void 0;
-var react_1 = __importDefault(require("react"));
-var radio_button_module_css_1 = __importDefault(require("./radio-button.module.css"));
-var RadioButton = /** @class */ (function (_super) {
-    __extends(RadioButton, _super);
-    function RadioButton() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RadioButton.prototype.render = function () {
-        var _a, _b, _c;
-        var convertStyle = {
-            '--off-color': (_a = this.props.offColor) !== null && _a !== void 0 ? _a : 'var(--neutral-bolder-border-color)',
-            '--active-color': (_b = this.props.activeColor) !== null && _b !== void 0 ? _b : 'var(--primary-main-color)',
-            '--size': this.props.size ? (typeof this.props.size === 'number') ? "".concat(this.props.size, "px") : this.props.size : '20px'
-        };
-        if (this.props.style) {
-            delete this.props.style.width;
-            delete this.props.style.minWidth;
-            delete this.props.style.maxWidth;
-            delete this.props.style.height;
-            delete this.props.style.minHeight;
-            delete this.props.style.maxHeight;
-            convertStyle = __assign(__assign({}, this.props.style), convertStyle);
-        }
-        return react_1.default.createElement("label", { id: this.props.id, className: "row ".concat(radio_button_module_css_1.default['radio-btn-container'], " ").concat((_c = this.props.className) !== null && _c !== void 0 ? _c : ''), style: convertStyle },
-            this.props.register ?
-                react_1.default.createElement("input", __assign({}, this.props.register, { type: "radio", value: this.props.value, disabled: this.props.disabled })) :
-                react_1.default.createElement("input", { type: "radio", name: this.props.name, value: this.props.value, defaultChecked: this.props.defaultChecked, disabled: this.props.disabled, onChange: this.props.onChange }),
-            react_1.default.createElement("span", { className: radio_button_module_css_1.default['checkmark'] }));
-    };
-    return RadioButton;
-}(react_1.default.Component));
-exports.RadioButton = RadioButton;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+var react_1 = __importDefault(require("react"));
+var radio_button_module_css_1 = __importDefault(require("./radio-button.module.css"));
+var RadioButton = /** @class */ (function (_super) {
+    __extends(RadioButton, _super);
+    function RadioButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RadioButton.prototype.render = function () {
+        var _a, _b, _c;
+        var convertStyle = {
+            '--off-color': (_a = this.props.offColor) !== null && _a !== void 0 ? _a : 'var(--neutral-bolder-border-color)',
+            '--active-color': (_b = this.props.activeColor) !== null && _b !== void 0 ? _b : 'var(--primary-main-color)',
+            '--size': this.props.size ? (typeof this.props.size === 'number') ? "".concat(this.props.size, "px") : this.props.size : '20px'
+        };
+        if (this.props.style) {
+            delete this.props.style.width;
+            delete this.props.style.minWidth;
+            delete this.props.style.maxWidth;
+            delete this.props.style.height;
+            delete this.props.style.minHeight;
+            delete this.props.style.maxHeight;
+            convertStyle = __assign(__assign({}, this.props.style), convertStyle);
+        }
+        return react_1.default.createElement("label", { id: this.props.id, className: "row ".concat(radio_button_module_css_1.default['radio-btn-container'], " ").concat((_c = this.props.className) !== null && _c !== void 0 ? _c : ''), style: convertStyle },
+            this.props.register ?
+                react_1.default.createElement("input", __assign({}, this.props.register, { type: "radio", value: this.props.value, disabled: this.props.disabled })) :
+                react_1.default.createElement("input", { type: "radio", name: this.props.name, value: this.props.value, defaultChecked: this.props.defaultChecked, disabled: this.props.disabled, onChange: this.props.onChange }),
+            react_1.default.createElement("span", { className: radio_button_module_css_1.default['checkmark'] }));
+    };
+    return RadioButton;
+}(react_1.default.Component));
+exports.RadioButton = RadioButton;