@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/Progress/ProgressLinear.mjs

@@ -1,24 +1,42 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
 import { m } from "framer-motion";
-var ProgressLinearBg = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  display: block;\n  height: 4px;\n"], ["\n  position: relative;\n  overflow: hidden;\n  display: block;\n  height: 4px;\n"])));
-var ProgressLinearFg = styled(m.span)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
+import styled from "styled-components";
+const ProgressLinearBg = styled.span`
+  position: relative;
+  overflow: hidden;
+  display: block;
+  height: 4px;
+`;
+const ProgressLinearFg = styled(m.span)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+`;
 /**
  * @see https://mui.com/components/progress/#linear
- */
-export var ProgressLinear = function (_a) {
-    var _b = _a.done, done = _b === void 0 ? false : _b, _c = _a.height, height = _c === void 0 ? "2px" : _c, _d = _a.bg, bg = _d === void 0 ? "transparent" : _d, _e = _a.fg, fg = _e === void 0 ? "currentColor" : _e, props = __rest(_a, ["done", "height", "bg", "fg"]);
-    return (_jsx(ProgressLinearBg, __assign({ style: { height: height, background: bg } }, props, { children: _jsx(ProgressLinearFg, { style: { height: height, background: fg }, initial: {
-                x: "-100%",
-            }, animate: {
-                x: done ? "-100%" : "0%",
-            }, transition: done
-                ? {}
-                : {
-                    repeat: Infinity,
-                    repeatType: "reverse",
-                    duration: 2,
-                } }) })));
+ */ export const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg = "currentColor", ...props })=>{
+    return /*#__PURE__*/ React.createElement(ProgressLinearBg, {
+        style: {
+            height,
+            background: bg
+        },
+        ...props
+    }, /*#__PURE__*/ React.createElement(ProgressLinearFg, {
+        style: {
+            height,
+            background: fg
+        },
+        initial: {
+            x: "-100%"
+        },
+        animate: {
+            x: done ? "-100%" : "0%"
+        },
+        transition: done ? {} : {
+            repeat: Infinity,
+            repeatType: "reverse",
+            duration: 2
+        }
+    }));
 };
-var templateObject_1, templateObject_2;

package/Progress/ProgressOverlay.js

@@ -1,28 +1,69 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressOverlay = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var framer_motion_1 = require("framer-motion");
-var ProgressCircular_1 = require("./ProgressCircular");
-var ProgressLinear_1 = require("./ProgressLinear");
-var Header_1 = require("../Header");
-var ProgressOverlayWrap = (0, styled_components_1.default)(framer_motion_1.m.div)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  cursor: wait;\n"], ["\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  cursor: wait;\n"])));
-var ProgressOverlayCenterer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--progress-overlay-bg);\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--progress-overlay-bg);\n"])));
-var ProgressOverlay = function (_a) {
-    var running = _a.running;
-    var _b = (0, Header_1.useHeader)(), headerHeight = _b[2];
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ProgressOverlay", {
+    enumerable: true,
+    get: function() {
+        return ProgressOverlay;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _framermotion = require("framer-motion");
+const _react = require("react");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _Header = require("../Header");
+const _ProgressCircular = require("./ProgressCircular");
+const _ProgressLinear = require("./ProgressLinear");
+const ProgressOverlayWrap = (0, _styledcomponents.default)(_framermotion.m.div)`
+  z-index: 10000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  cursor: wait;
+`;
+const ProgressOverlayCenterer = _styledcomponents.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--progress-overlay-bg);
+`;
+const ProgressOverlay = ({ running })=>{
+    const [, , headerHeight] = (0, _Header.useHeader)();
     // const [progress, setProgress] = useState(0);
-    (0, react_1.useEffect)(function () {
+    (0, _react.useEffect)(()=>{
         document.body.style.cursor = running ? "wait" : "";
-    }, [running]);
-    return ((0, jsx_runtime_1.jsxs)(ProgressOverlayWrap, { animate: {
-            opacity: running ? 1 : 0,
-        }, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [(0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), (0, jsx_runtime_1.jsx)(ProgressOverlayCenterer, { style: {
-                    top: headerHeight + "px",
-                }, children: (0, jsx_runtime_1.jsx)(ProgressCircular_1.ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
+    }, [
+        running
+    ]);
+    return /*#__PURE__*/ React.createElement(ProgressOverlayWrap, {
+        animate: {
+            opacity: running ? 1 : 0
+        },
+        initial: {
+            opacity: 0
+        },
+        transition: {
+            type: "easeInOut"
+        }
+    }, /*#__PURE__*/ React.createElement(_ProgressLinear.ProgressLinear, {
+        bg: "var(--accent400)",
+        fg: "var(--accent300)",
+        done: !running
+    }), /*#__PURE__*/ React.createElement(ProgressOverlayCenterer, {
+        style: {
+            top: headerHeight + "px"
+        }
+    }, /*#__PURE__*/ React.createElement(_ProgressCircular.ProgressCircular, {
+        size: "50px",
+        color: "var(--accent300)"
+    })));
 };
-exports.ProgressOverlay = ProgressOverlay;
-var templateObject_1, templateObject_2;

package/Progress/ProgressOverlay.mjs

@@ -1,24 +1,58 @@
-import { __makeTemplateObject } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { m } from "framer-motion";
 import { useEffect } from "react";
 import styled from "styled-components";
-import { m } from "framer-motion";
+import { useHeader } from "../Header";
 import { ProgressCircular } from "./ProgressCircular";
 import { ProgressLinear } from "./ProgressLinear";
-import { useHeader } from "../Header";
-var ProgressOverlayWrap = styled(m.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  cursor: wait;\n"], ["\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  cursor: wait;\n"])));
-var ProgressOverlayCenterer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--progress-overlay-bg);\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--progress-overlay-bg);\n"])));
-export var ProgressOverlay = function (_a) {
-    var running = _a.running;
-    var _b = useHeader(), headerHeight = _b[2];
+const ProgressOverlayWrap = styled(m.div)`
+  z-index: 10000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  cursor: wait;
+`;
+const ProgressOverlayCenterer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--progress-overlay-bg);
+`;
+export const ProgressOverlay = ({ running })=>{
+    const [, , headerHeight] = useHeader();
     // const [progress, setProgress] = useState(0);
-    useEffect(function () {
+    useEffect(()=>{
         document.body.style.cursor = running ? "wait" : "";
-    }, [running]);
-    return (_jsxs(ProgressOverlayWrap, { animate: {
-            opacity: running ? 1 : 0,
-        }, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, { style: {
-                    top: headerHeight + "px",
-                }, children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
+    }, [
+        running
+    ]);
+    return /*#__PURE__*/ React.createElement(ProgressOverlayWrap, {
+        animate: {
+            opacity: running ? 1 : 0
+        },
+        initial: {
+            opacity: 0
+        },
+        transition: {
+            type: "easeInOut"
+        }
+    }, /*#__PURE__*/ React.createElement(ProgressLinear, {
+        bg: "var(--accent400)",
+        fg: "var(--accent300)",
+        done: !running
+    }), /*#__PURE__*/ React.createElement(ProgressOverlayCenterer, {
+        style: {
+            top: headerHeight + "px"
+        }
+    }, /*#__PURE__*/ React.createElement(ProgressCircular, {
+        size: "50px",
+        color: "var(--accent300)"
+    })));
 };
-var templateObject_1, templateObject_2;

package/Progress/index.js

@@ -1,6 +1,8 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./ProgressCircular"), exports);
-tslib_1.__exportStar(require("./ProgressLinear"), exports);
-tslib_1.__exportStar(require("./ProgressOverlay"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./ProgressCircular"), exports);
+_export_star._(require("./ProgressLinear"), exports);
+_export_star._(require("./ProgressOverlay"), exports);

package/Rating/Rating.js

@@ -1,48 +1,130 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Rating = exports.RatingRoot = exports.RatingValue = exports.RatingCount = exports.RatingDetails = exports.RatingStar = exports.RatingStarRoot = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.RatingStarRoot = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 1px;\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 1px;\n"])));
-var RatingStar = function (_a) {
-    var value = _a.value, _b = _a.colorBg, colorBg = _b === void 0 ? "#FFD84C" : _b, _c = _a.colorStroke, colorStroke = _c === void 0 ? "#947813" : _c, size = _a.size, props = tslib_1.__rest(_a, ["value", "colorBg", "colorStroke", "size"]);
-    var id = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)(exports.RatingStarRoot, tslib_1.__assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: id, x1: "0", y1: "0", x2: "1", y2: "0", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] }) }), (0, jsx_runtime_1.jsx)("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    RatingStarRoot: function() {
+        return RatingStarRoot;
+    },
+    RatingStar: function() {
+        return RatingStar;
+    },
+    RatingDetails: function() {
+        return RatingDetails;
+    },
+    RatingCount: function() {
+        return RatingCount;
+    },
+    RatingValue: function() {
+        return RatingValue;
+    },
+    RatingRoot: function() {
+        return RatingRoot;
+    },
+    Rating: function() {
+        return Rating;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _react = require("react");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const RatingStarRoot = _styledcomponents.default.svg`
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 1px;
+`;
+const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props })=>{
+    const id = (0, _react.useId)();
+    return /*#__PURE__*/ React.createElement(RatingStarRoot, {
+        viewBox: "0 0 16 16",
+        "data-value": value,
+        width: size + "px",
+        height: size + "px",
+        ...props
+    }, /*#__PURE__*/ React.createElement("defs", null, /*#__PURE__*/ React.createElement("linearGradient", {
+        id: id,
+        x1: "0",
+        y1: "0",
+        x2: "1",
+        y2: "0"
+    }, /*#__PURE__*/ React.createElement("stop", {
+        offset: "0",
+        stopColor: colorBg
+    }), /*#__PURE__*/ React.createElement("stop", {
+        offset: value,
+        stopColor: colorBg
+    }), /*#__PURE__*/ React.createElement("stop", {
+        offset: value,
+        stopColor: "rgba(255, 255, 255, 0)"
+    }))), /*#__PURE__*/ React.createElement("path", {
+        stroke: colorStroke,
+        strokeWidth: "0.5",
+        fill: `url(#${id})`,
+        d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+    }));
 };
-exports.RatingStar = RatingStar;
-exports.RatingDetails = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"], ["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"])));
-exports.RatingCount = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
-exports.RatingValue = styled_components_1.default.span(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-exports.RatingRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  &:hover ", " {\n    display: inline-block;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  &:hover ", " {\n    display: inline-block;\n  }\n"])), exports.RatingValue);
-var Rating = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b, count = _a.count, _c = _a.min, min = _c === void 0 ? 0 : _c, _d = _a.max, max = _d === void 0 ? 5 : _d, _e = _a.showDetails, showDetails = _e === void 0 ? true : _e, colorBg = _a.colorBg, colorStroke = _a.colorStroke, _f = _a.starSize, starSize = _f === void 0 ? 16 : _f;
-    var id = (0, react_1.useId)();
-    var currentValue = (0, react_1.useState)(value)[0] /* , _setCurrentValue */;
-    var _g = (0, react_1.useState)([]), stars = _g[0], setStars = _g[1];
-    var getStars = (0, react_1.useCallback)(function (activeCount) {
-        var stars = [];
-        for (var currentStar = min + 1; currentStar < max + 1; currentStar++) {
-            var starValue = void 0;
-            var roundedActiveCount = Math.floor(activeCount);
+const RatingDetails = _styledcomponents.default.span`
+  padding-left: 0.5em;
+  font-size: 12px;
+  color: var(--grey100);
+
+  &:before {
+    content: "(";
+  }
+  &:after {
+    content: ")";
+  }
+`;
+const RatingCount = _styledcomponents.default.span``;
+const RatingValue = _styledcomponents.default.span`
+  display: none;
+`;
+const RatingRoot = _styledcomponents.default.div`
+  display: flex;
+  align-items: center;
+
+  &:hover ${RatingValue} {
+    display: inline-block;
+  }
+`;
+const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorBg, colorStroke, starSize = 16 })=>{
+    const id = (0, _react.useId)();
+    const [currentValue /* , _setCurrentValue */ ] = (0, _react.useState)(value);
+    const [stars, setStars] = (0, _react.useState)([]);
+    const getStars = (0, _react.useCallback)((activeCount)=>{
+        const stars = [];
+        for(let currentStar = min + 1; currentStar < max + 1; currentStar++){
+            let starValue;
+            const roundedActiveCount = Math.floor(activeCount);
             // we have a rating of 3.4, when we get to the 4th star:
             if (roundedActiveCount === currentStar - 1) {
                 starValue = 1 - (currentStar - activeCount);
-            }
-            else if (roundedActiveCount >= currentStar) {
+            } else if (roundedActiveCount >= currentStar) {
                 starValue = 1;
-            }
-            else {
+            } else {
                 starValue = 0;
             }
-            stars.push({ value: starValue });
+            stars.push({
+                value: starValue
+            });
         }
         return stars;
-    }, [min, max]);
-    (0, react_1.useEffect)(function () {
+    }, [
+        min,
+        max
+    ]);
+    (0, _react.useEffect)(()=>{
         setStars(getStars(currentValue));
-    }, [currentValue, getStars]);
+    }, [
+        currentValue,
+        getStars
+    ]);
     // function updateStars(index) {
     //   var currentActive = stars.filter((x) => x.active);
     //   if (index !== currentActive.length) {
@@ -65,11 +147,16 @@ var Rating = function (_a) {
     //     onChange(value);
     //   }
     // }, [onChange];
-    return ((0, jsx_runtime_1.jsxs)(exports.RatingRoot, { children: [stars.map(function (star, idx) { return ((0, jsx_runtime_1.jsx)(exports.RatingStar, { idx: idx, dataIdx: idx, size: starSize, 
-                // onMouseOver={handleMouseOver}
-                // onMouseLeave={handleMouseLeave}
-                // onClick={handleClick}
-                value: star.value, colorBg: colorBg, colorStroke: colorStroke }, id + idx)); }), " ", showDetails && count && ((0, jsx_runtime_1.jsxs)(exports.RatingDetails, { children: [(0, jsx_runtime_1.jsx)(exports.RatingCount, { children: count }), (0, jsx_runtime_1.jsx)(exports.RatingValue, { children: " - ".concat(value) })] }))] }));
+    return /*#__PURE__*/ React.createElement(RatingRoot, null, stars.map((star, idx)=>/*#__PURE__*/ React.createElement(RatingStar, {
+            key: id + idx,
+            idx: idx,
+            dataIdx: idx,
+            size: starSize,
+            // onMouseOver={handleMouseOver}
+            // onMouseLeave={handleMouseLeave}
+            // onClick={handleClick}
+            value: star.value,
+            colorBg: colorBg,
+            colorStroke: colorStroke
+        })), " ", showDetails && count && /*#__PURE__*/ React.createElement(RatingDetails, null, /*#__PURE__*/ React.createElement(RatingCount, null, count), /*#__PURE__*/ React.createElement(RatingValue, null, ` - ${value}`)));
 };
-exports.Rating = Rating;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Rating/Rating.mjs

@@ -1,44 +1,96 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useState } from "react";
 import styled from "styled-components";
-export var RatingStarRoot = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 1px;\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 1px;\n"])));
-export var RatingStar = function (_a) {
-    var value = _a.value, _b = _a.colorBg, colorBg = _b === void 0 ? "#FFD84C" : _b, _c = _a.colorStroke, colorStroke = _c === void 0 ? "#947813" : _c, size = _a.size, props = __rest(_a, ["value", "colorBg", "colorStroke", "size"]);
-    var id = useId();
-    return (_jsxs(RatingStarRoot, __assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [_jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] }) }), _jsx("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
+export const RatingStarRoot = styled.svg`
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 1px;
+`;
+export const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props })=>{
+    const id = useId();
+    return /*#__PURE__*/ React.createElement(RatingStarRoot, {
+        viewBox: "0 0 16 16",
+        "data-value": value,
+        width: size + "px",
+        height: size + "px",
+        ...props
+    }, /*#__PURE__*/ React.createElement("defs", null, /*#__PURE__*/ React.createElement("linearGradient", {
+        id: id,
+        x1: "0",
+        y1: "0",
+        x2: "1",
+        y2: "0"
+    }, /*#__PURE__*/ React.createElement("stop", {
+        offset: "0",
+        stopColor: colorBg
+    }), /*#__PURE__*/ React.createElement("stop", {
+        offset: value,
+        stopColor: colorBg
+    }), /*#__PURE__*/ React.createElement("stop", {
+        offset: value,
+        stopColor: "rgba(255, 255, 255, 0)"
+    }))), /*#__PURE__*/ React.createElement("path", {
+        stroke: colorStroke,
+        strokeWidth: "0.5",
+        fill: `url(#${id})`,
+        d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+    }));
 };
-export var RatingDetails = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"], ["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"])));
-export var RatingCount = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
-export var RatingValue = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-export var RatingRoot = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  &:hover ", " {\n    display: inline-block;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  &:hover ", " {\n    display: inline-block;\n  }\n"])), RatingValue);
-export var Rating = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b, count = _a.count, _c = _a.min, min = _c === void 0 ? 0 : _c, _d = _a.max, max = _d === void 0 ? 5 : _d, _e = _a.showDetails, showDetails = _e === void 0 ? true : _e, colorBg = _a.colorBg, colorStroke = _a.colorStroke, _f = _a.starSize, starSize = _f === void 0 ? 16 : _f;
-    var id = useId();
-    var currentValue = useState(value)[0] /* , _setCurrentValue */;
-    var _g = useState([]), stars = _g[0], setStars = _g[1];
-    var getStars = useCallback(function (activeCount) {
-        var stars = [];
-        for (var currentStar = min + 1; currentStar < max + 1; currentStar++) {
-            var starValue = void 0;
-            var roundedActiveCount = Math.floor(activeCount);
+export const RatingDetails = styled.span`
+  padding-left: 0.5em;
+  font-size: 12px;
+  color: var(--grey100);
+
+  &:before {
+    content: "(";
+  }
+  &:after {
+    content: ")";
+  }
+`;
+export const RatingCount = styled.span``;
+export const RatingValue = styled.span`
+  display: none;
+`;
+export const RatingRoot = styled.div`
+  display: flex;
+  align-items: center;
+
+  &:hover ${RatingValue} {
+    display: inline-block;
+  }
+`;
+export const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorBg, colorStroke, starSize = 16 })=>{
+    const id = useId();
+    const [currentValue /* , _setCurrentValue */ ] = useState(value);
+    const [stars, setStars] = useState([]);
+    const getStars = useCallback((activeCount)=>{
+        const stars = [];
+        for(let currentStar = min + 1; currentStar < max + 1; currentStar++){
+            let starValue;
+            const roundedActiveCount = Math.floor(activeCount);
             // we have a rating of 3.4, when we get to the 4th star:
             if (roundedActiveCount === currentStar - 1) {
                 starValue = 1 - (currentStar - activeCount);
-            }
-            else if (roundedActiveCount >= currentStar) {
+            } else if (roundedActiveCount >= currentStar) {
                 starValue = 1;
-            }
-            else {
+            } else {
                 starValue = 0;
             }
-            stars.push({ value: starValue });
+            stars.push({
+                value: starValue
+            });
         }
         return stars;
-    }, [min, max]);
-    useEffect(function () {
+    }, [
+        min,
+        max
+    ]);
+    useEffect(()=>{
         setStars(getStars(currentValue));
-    }, [currentValue, getStars]);
+    }, [
+        currentValue,
+        getStars
+    ]);
     // function updateStars(index) {
     //   var currentActive = stars.filter((x) => x.active);
     //   if (index !== currentActive.length) {
@@ -61,10 +113,16 @@ export var Rating = function (_a) {
     //     onChange(value);
     //   }
     // }, [onChange];
-    return (_jsxs(RatingRoot, { children: [stars.map(function (star, idx) { return (_jsx(RatingStar, { idx: idx, dataIdx: idx, size: starSize, 
-                // onMouseOver={handleMouseOver}
-                // onMouseLeave={handleMouseLeave}
-                // onClick={handleClick}
-                value: star.value, colorBg: colorBg, colorStroke: colorStroke }, id + idx)); }), " ", showDetails && count && (_jsxs(RatingDetails, { children: [_jsx(RatingCount, { children: count }), _jsx(RatingValue, { children: " - ".concat(value) })] }))] }));
+    return /*#__PURE__*/ React.createElement(RatingRoot, null, stars.map((star, idx)=>/*#__PURE__*/ React.createElement(RatingStar, {
+            key: id + idx,
+            idx: idx,
+            dataIdx: idx,
+            size: starSize,
+            // onMouseOver={handleMouseOver}
+            // onMouseLeave={handleMouseLeave}
+            // onClick={handleClick}
+            value: star.value,
+            colorBg: colorBg,
+            colorStroke: colorStroke
+        })), " ", showDetails && count && /*#__PURE__*/ React.createElement(RatingDetails, null, /*#__PURE__*/ React.createElement(RatingCount, null, count), /*#__PURE__*/ React.createElement(RatingValue, null, ` - ${value}`)));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;