@koine/react 1.1.10 → 1.1.11

package/Progress/ProgressCircular.mjs

@@ -0,0 +1,15 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { keyframes } from "styled-components";
+var animationRotation = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
+var animationCircle = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
+var ProgressCircularSvg = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  animation: ", " 1.5s linear infinite;\n"], ["\n  animation: ", " 1.5s linear infinite;\n"])), animationRotation);
+var ProgressCircularCircle = styled.circle(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: ", " 1.5s linear infinite;\n"], ["\n  animation: ", " 1.5s linear infinite;\n"])), animationCircle);
+/**
+ * @see https://mui.com/components/progress/
+ */
+export var ProgressCircular = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "1em" : _b, _c = _a.thickness, thickness = _c === void 0 ? 1 : _c, _d = _a.color, color = _d === void 0 ? "currentColor" : _d, props = __rest(_a, ["size", "thickness", "color"]);
+    return (_jsx(ProgressCircularSvg, __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 44 44", style: { width: size, height: size } }, props, { children: _jsx(ProgressCircularCircle, { cx: "22", cy: "22", r: "20", fill: "none", strokeWidth: thickness, style: { stroke: color } }) })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Progress/ProgressLinear.js

@@ -1,15 +1,18 @@
-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"])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressLinear = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var framer_motion_1 = require("framer-motion");
+var ProgressLinearBg = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_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 = (0, styled_components_1.default)(framer_motion_1.m.span)(templateObject_2 || (templateObject_2 = tslib_1.__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"])));
 /**
  * @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: {
+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 = tslib_1.__rest(_a, ["done", "height", "bg", "fg"]);
+    return ((0, jsx_runtime_1.jsx)(ProgressLinearBg, tslib_1.__assign({ style: { height: height, background: bg } }, props, { children: (0, jsx_runtime_1.jsx)(ProgressLinearFg, { style: { height: height, background: fg }, initial: {
                 x: "-100%",
             }, animate: {
                 x: done ? "-100%" : "0%",
@@ -21,4 +24,5 @@ export var ProgressLinear = function (_a) {
                     duration: 2,
                 } }) })));
 };
+exports.ProgressLinear = ProgressLinear;
 var templateObject_1, templateObject_2;

package/Progress/ProgressLinear.mjs

@@ -0,0 +1,24 @@
+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"])));
+/**
+ * @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,
+                } }) })));
+};
+var templateObject_1, templateObject_2;

package/Progress/ProgressOverlay.js

@@ -1,24 +1,28 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import styled from "styled-components";
-import { m } from "framer-motion";
-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) {
+"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 = useHeader(), headerHeight = _b[2];
+    var _b = (0, Header_1.useHeader)(), headerHeight = _b[2];
     // const [progress, setProgress] = useState(0);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         document.body.style.cursor = running ? "wait" : "";
     }, [running]);
-    return (_jsxs(ProgressOverlayWrap, __assign({ animate: {
+    return ((0, jsx_runtime_1.jsxs)(ProgressOverlayWrap, tslib_1.__assign({ animate: {
             opacity: running ? 1 : 0,
-        }, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, __assign({ style: {
+        }, 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, tslib_1.__assign({ style: {
                     top: headerHeight + "px",
-                } }, { children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
+                } }, { children: (0, jsx_runtime_1.jsx)(ProgressCircular_1.ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
 };
+exports.ProgressOverlay = ProgressOverlay;
 var templateObject_1, templateObject_2;

package/Progress/ProgressOverlay.mjs

@@ -0,0 +1,24 @@
+import { __assign, __makeTemplateObject } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import styled from "styled-components";
+import { m } from "framer-motion";
+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 [progress, setProgress] = useState(0);
+    useEffect(function () {
+        document.body.style.cursor = running ? "wait" : "";
+    }, [running]);
+    return (_jsxs(ProgressOverlayWrap, __assign({ animate: {
+            opacity: running ? 1 : 0,
+        }, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, __assign({ style: {
+                    top: headerHeight + "px",
+                } }, { children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
+};
+var templateObject_1, templateObject_2;

package/Progress/index.js

@@ -1,3 +1,6 @@
-export * from "./ProgressCircular";
-export * from "./ProgressLinear";
-export * from "./ProgressOverlay";
+"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);

package/Progress/index.mjs

@@ -0,0 +1,3 @@
+export * from "./ProgressCircular";
+export * from "./ProgressLinear";
+export * from "./ProgressOverlay";

package/Progress/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Progress/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Rating/Rating.js

@@ -1,23 +1,27 @@
-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", __assign({ 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" })] })));
+"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", tslib_1.__assign({ 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" })] })));
 };
-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) {
+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 = useId();
-    var currentValue = useState(value)[0] /* , _setCurrentValue */;
-    var _g = useState([]), stars = _g[0], setStars = _g[1];
-    var getStars = useCallback(function (activeCount) {
+    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;
@@ -36,7 +40,7 @@ export var Rating = function (_a) {
         }
         return stars;
     }, [min, max]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         setStars(getStars(currentValue));
     }, [currentValue, getStars]);
     // function updateStars(index) {
@@ -61,10 +65,11 @@ 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, 
+    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 && (_jsxs(RatingDetails, { children: [_jsx(RatingCount, { children: count }), _jsx(RatingValue, { children: " - ".concat(value) })] }))] }));
+                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) })] }))] }));
 };
+exports.Rating = Rating;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Rating/Rating.mjs

@@ -0,0 +1,70 @@
+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", __assign({ 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 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);
+            // 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) {
+                starValue = 1;
+            }
+            else {
+                starValue = 0;
+            }
+            stars.push({ value: starValue });
+        }
+        return stars;
+    }, [min, max]);
+    useEffect(function () {
+        setStars(getStars(currentValue));
+    }, [currentValue, getStars]);
+    // function updateStars(index) {
+    //   var currentActive = stars.filter((x) => x.active);
+    //   if (index !== currentActive.length) {
+    //     setStars(getStars(index));
+    //   }
+    // }
+    // function handleMouseOver(event) {
+    //   let index = Number(event.currentTarget.getAttribute("data-idx")) + 1;
+    //   updateStars(index);
+    // }
+    // function handleMouseLeave() {
+    //   setStars(getStars());
+    // }
+    // const handleClick = useCallback((event) => {
+    //   let index = Number(event.currentTarget.getAttribute("data-idx"));
+    //   let value  = index = index + 1;
+    //   if (value !== currentValue) {
+    //     setStars(getStars(value));
+    //     setCurrentValue(value);
+    //     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) })] }))] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Rating/index.js

@@ -1,4 +1,8 @@
-export * from "./Rating";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deriveRating = exports.convertRange = exports.getRatingValue = exports.getRatingWord = void 0;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Rating"), exports);
 var RATING_WORDS = {
     0: "Worst",
     1: "Bad",
@@ -8,7 +12,7 @@ var RATING_WORDS = {
     4.5: "Excellent",
     5: "Best",
 };
-export var getRatingWord = function (value, precision) {
+var getRatingWord = function (value, precision) {
     if (precision === void 0) { precision = 0.5; }
     var buffer = 0;
     var word;
@@ -19,20 +23,23 @@ export var getRatingWord = function (value, precision) {
     }
     return word;
 };
-export var getRatingValue = function (value) {
+exports.getRatingWord = getRatingWord;
+var getRatingValue = function (value) {
     var converted = convertRange(value, [0, 5], [0, 10]);
     if (converted % 1 === 0) {
         return converted;
     }
     return converted.toFixed(1);
 };
+exports.getRatingValue = getRatingValue;
 /**
  * @see https://stackoverflow.com/a/14224813
  */
-export function convertRange(value, r1, r2) {
+function convertRange(value, r1, r2) {
     return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
 }
-export var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
+exports.convertRange = convertRange;
+var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
     if (minValue === void 0) { minValue = 3.8; }
     if (maxValue === void 0) { maxValue = 5; }
     if (minQuantity === void 0) { minQuantity = 9; }
@@ -47,3 +54,4 @@ export var deriveRating = function (title, date, minValue, maxValue, minQuantity
         count: count,
     };
 };
+exports.deriveRating = deriveRating;

package/{node/Rating/index.js → Rating/index.mjs}

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deriveRating = exports.convertRange = exports.getRatingValue = exports.getRatingWord = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Rating"), exports);
+export * from "./Rating";
 var RATING_WORDS = {
     0: "Worst",
     1: "Bad",
@@ -12,7 +8,7 @@ var RATING_WORDS = {
     4.5: "Excellent",
     5: "Best",
 };
-var getRatingWord = function (value, precision) {
+export var getRatingWord = function (value, precision) {
     if (precision === void 0) { precision = 0.5; }
     var buffer = 0;
     var word;
@@ -23,23 +19,20 @@ var getRatingWord = function (value, precision) {
     }
     return word;
 };
-exports.getRatingWord = getRatingWord;
-var getRatingValue = function (value) {
+export var getRatingValue = function (value) {
     var converted = convertRange(value, [0, 5], [0, 10]);
     if (converted % 1 === 0) {
         return converted;
     }
     return converted.toFixed(1);
 };
-exports.getRatingValue = getRatingValue;
 /**
  * @see https://stackoverflow.com/a/14224813
  */
-function convertRange(value, r1, r2) {
+export function convertRange(value, r1, r2) {
     return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
 }
-exports.convertRange = convertRange;
-var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
+export var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
     if (minValue === void 0) { minValue = 3.8; }
     if (maxValue === void 0) { maxValue = 5; }
     if (minQuantity === void 0) { minQuantity = 9; }
@@ -54,4 +47,3 @@ var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
         count: count,
     };
 };
-exports.deriveRating = deriveRating;

package/Rating/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Rating/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Select/SelectDownshift.js

@@ -1,4 +1,7 @@
-export var Select = null;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+exports.Select = null;
 // import { useSelect } from "downshift";
 // export type SelectProps = {
 //   options?: Option[];

package/{node/Select/SelectDownshift.js → Select/SelectDownshift.mjs}

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-exports.Select = null;
+export var Select = null;
 // import { useSelect } from "downshift";
 // export type SelectProps = {
 //   options?: Option[];

package/Select/components.js

@@ -1,12 +1,15 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import styled from "styled-components";
-import { m } from "framer-motion";
-import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
-export var SelectArrowStyled = styled(m.span)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"])));
-export var SelectArrow = forwardRef(function SelectArrow(_a, ref) {
-    var isOpen = _a.isOpen, props = __rest(_a, ["isOpen"]);
-    return (_jsx(SelectArrowStyled, __assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: _jsx(IconCollapse, {}) })));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectArrow = exports.SelectArrowStyled = 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 bs_1 = require("react-icons/bs");
+exports.SelectArrowStyled = (0, styled_components_1.default)(framer_motion_1.m.span)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"])));
+exports.SelectArrow = (0, react_1.forwardRef)(function SelectArrow(_a, ref) {
+    var isOpen = _a.isOpen, props = tslib_1.__rest(_a, ["isOpen"]);
+    return ((0, jsx_runtime_1.jsx)(exports.SelectArrowStyled, tslib_1.__assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(bs_1.BsBoxArrowInDown, {}) })));
 });
 var templateObject_1;

package/Select/components.mjs

@@ -0,0 +1,12 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { m } from "framer-motion";
+import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
+export var SelectArrowStyled = styled(m.span)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"])));
+export var SelectArrow = forwardRef(function SelectArrow(_a, ref) {
+    var isOpen = _a.isOpen, props = __rest(_a, ["isOpen"]);
+    return (_jsx(SelectArrowStyled, __assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: _jsx(IconCollapse, {}) })));
+});
+var templateObject_1;

package/Select/index.js

@@ -1,3 +1,7 @@
-export { Select } from "./SelectDownshift";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var SelectDownshift_1 = require("./SelectDownshift");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return SelectDownshift_1.Select; } });
 // export type { SelectProps } from "./SelectReach";
 // export { Select } from "./SelectReach";

package/Select/index.mjs

@@ -0,0 +1,3 @@
+export { Select } from "./SelectDownshift";
+// export type { SelectProps } from "./SelectReach";
+// export { Select } from "./SelectReach";

package/Select/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Select/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Sidebar/Sidebar.js

@@ -1,23 +1,27 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import styled from "styled-components";
-import { GrFolderOpen as IconOpen } from "react-icons/gr";
-import { CgCloseR as IconClose } from "react-icons/cg";
-import { max, min } from "../styles/media";
-import { IconButtonFab } from "../Buttons";
-import { useHeader } from "../Header";
-var SidebarWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
-    return "".concat(max.md, " {\n      z-index: 20;\n      display: flex;\n      flex-direction: column;\n      position: fixed;\n      right: 0;\n      left: var(--gutter-half);\n      top: ").concat(p.$top || 0, "px;\n      bottom: 0;\n      padding: var(--gutter-half);\n      transform: ").concat(p.$open ? "translateX(0)" : "translateX(100%)", ";\n      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;\n      background: white;\n      box-shadow: ").concat(p.$open ? "0 0 0 100vh rgba(0, 0, 0, .3)" : "0 0 100vh rgba(0, 0, 0, 0)", ";\n      will-change: transform, box-shadow;\n      pointer-events: ").concat(p.$open ? "all" : "none", "\n    }");
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = 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 gr_1 = require("react-icons/gr");
+var cg_1 = require("react-icons/cg");
+var media_1 = require("../styles/media");
+var Buttons_1 = require("../Buttons");
+var Header_1 = require("../Header");
+var SidebarWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return "".concat(media_1.max.md, " {\n      z-index: 20;\n      display: flex;\n      flex-direction: column;\n      position: fixed;\n      right: 0;\n      left: var(--gutter-half);\n      top: ").concat(p.$top || 0, "px;\n      bottom: 0;\n      padding: var(--gutter-half);\n      transform: ").concat(p.$open ? "translateX(0)" : "translateX(100%)", ";\n      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;\n      background: white;\n      box-shadow: ").concat(p.$open ? "0 0 0 100vh rgba(0, 0, 0, .3)" : "0 0 100vh rgba(0, 0, 0, 0)", ";\n      will-change: transform, box-shadow;\n      pointer-events: ").concat(p.$open ? "all" : "none", "\n    }");
 });
-var SidebarToggle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), min.md);
-export var Sidebar = function (_a) {
+var SidebarToggle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), media_1.min.md);
+var Sidebar = function (_a) {
     var children = _a.children;
-    var _b = useState(false), open = _b[0], setOpen = _b[1];
-    var _c = useHeader(), headerHeight = _c[2];
-    var handleClickToggle = useCallback(function () {
+    var _b = (0, react_1.useState)(false), open = _b[0], setOpen = _b[1];
+    var _c = (0, Header_1.useHeader)(), headerHeight = _c[2];
+    var handleClickToggle = (0, react_1.useCallback)(function () {
         setOpen(function (prevOpen) { return !prevOpen; });
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, __assign({ onClick: handleClickToggle }, { children: _jsx(IconButtonFab, __assign({ "$variant": "contained" }, { children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) })) })), _jsx(SidebarWrapper, __assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarToggle, tslib_1.__assign({ onClick: handleClickToggle }, { children: (0, jsx_runtime_1.jsx)(Buttons_1.IconButtonFab, tslib_1.__assign({ "$variant": "contained" }, { children: open ? (0, jsx_runtime_1.jsx)(cg_1.CgCloseR, {}) : (0, jsx_runtime_1.jsx)(gr_1.GrFolderOpen, {}) })) })), (0, jsx_runtime_1.jsx)(SidebarWrapper, tslib_1.__assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
 };
+exports.Sidebar = Sidebar;
 var templateObject_1, templateObject_2;