@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

package/MenuItem/useMenuItem.mjs

@@ -1,60 +1,78 @@
-import { __assign } from "tslib";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { unstable_useForkRef as useForkRef } from "@mui/utils";
 import useMenu from "@mui/base/useMenu";
+import useForkRef from "@mui/utils/useForkRef";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 // import { unstable_useIsFocusVisible as useIsFocusVisible } from "@mui/utils";
 export function useMenuItem(props) {
-    var _a;
-    var _b = props.disabled, disabled = _b === void 0 ? false : _b, ref = props.rootRef, label = props.label;
-    var id = useId();
-    var _c = useMenu(), contextValue = _c.contextValue, open = _c.open;
+    const { disabled = false, rootRef: ref, label } = props;
+    const id = useId();
+    const { contextValue, open } = useMenu();
     // const { getRootProps } = useMenuItemUnstyled(props);
-    var itemRef = useRef(null);
-    var handleRef = useForkRef(itemRef, ref);
+    const itemRef = useRef(null);
+    const handleRef = useForkRef(itemRef, ref);
     if (contextValue === null) {
         throw new Error("MenuItemUnstyled must be used within a MenuUnstyled");
     }
-    var registerItem = contextValue.registerItem, getItemState = contextValue.getItemState;
-    useEffect(function () {
-        registerItem(id, { disabled: disabled, id: id, ref: itemRef, label: label });
-        // return () => unregisterItem(id);
-    }, [id, registerItem, /* unregisterItem,  */ disabled, ref, label]);
+    const { registerItem, getItemState } = contextValue;
+    useEffect(()=>{
+        registerItem(id, {
+            disabled,
+            id,
+            ref: itemRef,
+            label
+        });
+    // return () => unregisterItem(id);
+    }, [
+        id,
+        registerItem,
+        /* unregisterItem,  */ disabled,
+        ref,
+        label
+    ]);
     // const { getRootProps: getButtonProps, focusVisible } = useButton({
     //   disabled,
     //   focusableWhenDisabled: true,
     //   ref: handleRef,
     // });
     // Ensure the menu item is focused when highlighted
-    var _d = useState(false), focusRequested = _d[0], requestFocus = _d[1];
-    var focusIfRequested = useCallback(function () {
+    const [focusRequested, requestFocus] = useState(false);
+    const focusIfRequested = useCallback(()=>{
         if (focusRequested && itemRef.current != null) {
             itemRef.current.focus();
             requestFocus(false);
         }
-    }, [focusRequested]);
-    useEffect(function () {
+    }, [
+        focusRequested
+    ]);
+    useEffect(()=>{
         focusIfRequested();
     });
     // useDebugValue({ id, disabled, label });
-    var itemState = getItemState(id !== null && id !== void 0 ? id : "");
-    var highlighted = (itemState !== null && itemState !== void 0 ? itemState : { highlighted: false }).highlighted;
-    useEffect(function () {
+    const itemState = getItemState(id ?? "");
+    const { highlighted } = itemState ?? {
+        highlighted: false
+    };
+    useEffect(()=>{
         requestFocus(highlighted && open);
-    }, [highlighted, open]);
+    }, [
+        highlighted,
+        open
+    ]);
     return {
-        getRootProps: function (other) {
+        getRootProps: (other)=>{
             // const optionProps = menuContext.getItemProps(id, other);
-            return __assign(__assign({}, other), { 
+            return {
+                ...other,
                 // ...getButtonProps(other),
                 // @ ts-expect-error type from @mui/base is not specific
                 // tabIndex: optionProps.tabIndex,
                 // @ ts-expect-error type from @mui/base is not specific
                 // id: optionProps.id,
-                role: "menuitem" });
+                role: "menuitem"
+            };
         },
-        disabled: (_a = itemState === null || itemState === void 0 ? void 0 : itemState.disabled) !== null && _a !== void 0 ? _a : false,
+        disabled: itemState?.disabled ?? false,
         // focusVisible,
-        ref: handleRef,
+        ref: handleRef
     };
 }
 export default useMenuItem;

package/Meta/Meta.mjs

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export var Meta = function (_a) {
-    var zoom = _a.zoom;
-    return (_jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1, maximum-scale=1".concat(zoom ? "" : ", user-scalable=0") }));
+export const Meta = ({ zoom })=>{
+    return /*#__PURE__*/ _jsx("meta", {
+        name: "viewport",
+        content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}`
+    });
 };
 export default Meta;

package/NoJs/NoJs.mjs

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export var NoJs = function (_props) {
-    return (_jsx("script", { id: "no-js", dangerouslySetInnerHTML: {
-            __html: "document.querySelector(\"html\").className=document.querySelector(\"html\").className.replace(/no-js/,\"\") + \"js\";",
-        } }));
+export const NoJs = (_props)=>{
+    return /*#__PURE__*/ _jsx("script", {
+        id: "no-js",
+        dangerouslySetInnerHTML: {
+            __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`
+        }
+    });
 };
 export default NoJs;

package/Pagination/PaginationNav.d.ts

@@ -1,4 +1,4 @@
-import { KoineComponentProps, KoineComponent } from "../types";
+import { KoineComponent, KoineComponentProps } from "../types";
 export type KoinePaginationNavProps = {
     /** The total number of elements to paginate */
     total: string | number;

package/Pagination/PaginationNav.mjs

@@ -1,16 +1,42 @@
-import { __makeTemplateObject } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CgArrowLeftR as IconArrowLeft, CgArrowRightR as IconArrowRight } from "react-icons/cg";
 import styled from "styled-components";
-import { CgArrowRightR as IconArrowRight, CgArrowLeftR as IconArrowLeft, } from "react-icons/cg";
 import ensureInt from "@koine/utils/ensureInt";
-var Root = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px 0 40px;\n  font-weight: 600;\n\n  & a {\n    text-decoration: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px 0 40px;\n  font-weight: 600;\n\n  & a {\n    text-decoration: none;\n  }\n"])));
-var item = "\n  display: block;\n  padding: 5px 10px;\n";
-var ItemCurrent = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  background: var(--accent400);\n  border-radius: 2px;\n"], ["\n  ", "\n  background: var(--accent400);\n  border-radius: 2px;\n"])), item);
-var ItemLink = styled.a(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), item, function (props) { return (props.prev ? "color: var(--grey100);" : ""); });
-var DotsSeparator = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: var(--grey100);\n"], ["\n  color: var(--grey100);\n"])));
-var arrow = "display: flex; font-size: 20px;";
-var ItemPrev = styled.a(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), arrow);
-var ItemNext = styled.a(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), arrow);
+const Root = styled.nav`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0 40px;
+  font-weight: 600;
+
+  & a {
+    text-decoration: none;
+  }
+`;
+const item = `
+  display: block;
+  padding: 5px 10px;
+`;
+const ItemCurrent = styled.span`
+  ${item}
+  background: var(--accent400);
+  border-radius: 2px;
+`;
+const ItemLink = styled.a`
+  ${item}
+
+  ${(props)=>props.prev ? "color: var(--grey100);" : ""}
+`;
+const DotsSeparator = styled.span`
+  color: var(--grey100);
+`;
+const arrow = `display: flex; font-size: 20px;`;
+const ItemPrev = styled.a`
+  ${arrow}
+`;
+const ItemNext = styled.a`
+  ${arrow}
+`;
 /*
  * Possible outcomes:
  * [1] 2 3 ... 78 >
@@ -18,10 +44,8 @@ var ItemNext = styled.a(templateObject_6 || (templateObject_6 = __makeTemplateOb
  * < 1 ... 6 7 [8] 9 10 ... 78 >
  * < 1 ... 75 76 [77] 78 >
  * < 1 ... 76 77 [78]
- */
-export var KoinePaginationNav = function (_a) {
-    var total = _a.total, perPage = _a.perPage, _currentPage = _a.currentPage, baseUrl = _a.baseUrl, _b = _a.showOffset, showOffset = _b === void 0 ? 2 : _b, _c = _a.currentUrl, currentUrl = _c === void 0 ? "/" : _c, _d = _a.Link, Link = _d === void 0 ? "a" : _d;
-    var currentPage = ensureInt(_currentPage);
+ */ export const KoinePaginationNav = ({ total, perPage, currentPage: _currentPage, baseUrl, showOffset = 2, currentUrl = "/", Link = "a" })=>{
+    let currentPage = ensureInt(_currentPage);
     total = ensureInt(total);
     perPage = ensureInt(perPage);
     // page 0 means 1
@@ -31,15 +55,15 @@ export var KoinePaginationNav = function (_a) {
     if (total < perPage) {
         return null;
     }
-    var firstPage = 1;
-    var lastPage = Math.ceil(total / perPage);
-    var prevPage = currentPage - 1 > firstPage ? currentPage - 1 : "";
-    var nextPage = currentPage + 1 < lastPage ? currentPage + 1 : lastPage;
-    var prevArrow = currentPage > firstPage;
-    var nextArrow = currentPage < lastPage;
-    var pages = [];
+    const firstPage = 1;
+    const lastPage = Math.ceil(total / perPage);
+    const prevPage = currentPage - 1 > firstPage ? currentPage - 1 : "";
+    const nextPage = currentPage + 1 < lastPage ? currentPage + 1 : lastPage;
+    const prevArrow = currentPage > firstPage;
+    const nextArrow = currentPage < lastPage;
+    const pages = [];
     // fill the pages before the current
-    for (var i = currentPage - showOffset; i < currentPage; i++) {
+    for(let i = currentPage - showOffset; i < currentPage; i++){
         if (i > 1) {
             pages.push(i);
         }
@@ -47,15 +71,52 @@ export var KoinePaginationNav = function (_a) {
     // add the current
     pages.push(currentPage);
     // fill the pages after the current
-    for (var i = currentPage + 1; i < currentPage + 1 + showOffset; i++) {
+    for(let i = currentPage + 1; i < currentPage + 1 + showOffset; i++){
         if (i < lastPage) {
             pages.push(i);
         }
     }
-    var prevDots = pages[0] > firstPage + 1;
-    var nextDots = pages[pages.length - 1] < lastPage - 1;
-    return (_jsxs(Root, { children: [prevArrow && (_jsx(ItemPrev, { as: Link, href: "".concat(baseUrl, "/").concat(prevPage), children: _jsx(IconArrowLeft, {}) })), firstPage !== currentPage && (_jsx(ItemLink, { as: Link, href: "".concat(baseUrl), prev: true, children: firstPage })), prevDots && _jsx(DotsSeparator, { children: "..." }), pages.map(function (page) {
-                return page === currentPage ? (_jsx(ItemCurrent, { children: page }, page)) : (_jsx(ItemLink, { as: Link, href: "".concat(baseUrl, "/").concat(page), prev: page < currentPage, next: page > currentPage, children: page }, "pagination-".concat(page)));
-            }), nextDots && _jsx(DotsSeparator, { children: "..." }), lastPage !== currentPage && (_jsx(ItemLink, { as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true, children: lastPage })), nextArrow && (_jsx(ItemNext, { as: Link, href: "".concat(baseUrl, "/").concat(nextPage), children: _jsx(IconArrowRight, {}) }))] }));
+    const prevDots = pages[0] > firstPage + 1;
+    const nextDots = pages[pages.length - 1] < lastPage - 1;
+    return /*#__PURE__*/ _jsxs(Root, {
+        children: [
+            prevArrow && /*#__PURE__*/ _jsx(ItemPrev, {
+                as: Link,
+                href: `${baseUrl}/${prevPage}`,
+                children: /*#__PURE__*/ _jsx(IconArrowLeft, {})
+            }),
+            firstPage !== currentPage && /*#__PURE__*/ _jsx(ItemLink, {
+                as: Link,
+                href: `${baseUrl}`,
+                prev: true,
+                children: firstPage
+            }),
+            prevDots && /*#__PURE__*/ _jsx(DotsSeparator, {
+                children: "..."
+            }),
+            pages.map((page)=>page === currentPage ? /*#__PURE__*/ _jsx(ItemCurrent, {
+                    children: page
+                }, page) : /*#__PURE__*/ _jsx(ItemLink, {
+                    as: Link,
+                    href: `${baseUrl}/${page}`,
+                    prev: page < currentPage,
+                    next: page > currentPage,
+                    children: page
+                }, `pagination-${page}`)),
+            nextDots && /*#__PURE__*/ _jsx(DotsSeparator, {
+                children: "..."
+            }),
+            lastPage !== currentPage && /*#__PURE__*/ _jsx(ItemLink, {
+                as: Link,
+                href: `${baseUrl}/${lastPage}`,
+                next: true,
+                children: lastPage
+            }),
+            nextArrow && /*#__PURE__*/ _jsx(ItemNext, {
+                as: Link,
+                href: `${baseUrl}/${nextPage}`,
+                children: /*#__PURE__*/ _jsx(IconArrowRight, {})
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Pagination/PaginationResults.mjs

@@ -1,11 +1,34 @@
-import { __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
 import { AnimatePresence, m } from "framer-motion";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // overflow: hidden;\n"], ["\n  // overflow: hidden;\n"])));
-var Inner = styled(m.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-export var PaginationResults = function (_a) {
-    var children = _a.children;
-    return (_jsx(AnimatePresence, { exitBeforeEnter: true, initial: true, children: _jsx(Root, { children: _jsx(Inner, { initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 }, children: children }) }) }));
+import styled from "styled-components";
+const Root = styled.div`
+  // overflow: hidden;
+`;
+const Inner = styled(m.div)``;
+export const PaginationResults = ({ children })=>{
+    return /*#__PURE__*/ _jsx(AnimatePresence, {
+        exitBeforeEnter: true,
+        initial: true,
+        children: /*#__PURE__*/ _jsx(Root, {
+            children: /*#__PURE__*/ _jsx(Inner, {
+                initial: {
+                    opacity: 0,
+                    x: -100
+                },
+                animate: {
+                    opacity: 1,
+                    x: 0
+                },
+                exit: {
+                    opacity: 0,
+                    x: 100
+                },
+                transition: {
+                    type: "linear",
+                    staggerChildren: 0.3
+                },
+                children: children
+            })
+        })
+    });
 };
-var templateObject_1, templateObject_2;

package/Pill/Pill.d.ts

@@ -1,5 +1,5 @@
 export type PillProps = object;
-export declare const Pill: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, object, never>;
-export declare const PillGreyLight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, object, never>;
-export declare const PillAccentLight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, object, never>;
-export declare const PillAccentLightOutlined: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, object, never>;
+export declare const Pill: any;
+export declare const PillGreyLight: any;
+export declare const PillAccentLight: any;
+export declare const PillAccentLightOutlined: any;

package/Pill/Pill.mjs

@@ -1,7 +1,37 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var Pill = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 5px 10px;\n  margin: 0 0.5em 0.5em 0;\n  border-radius: 2px;\n  text-decoration: none;\n  font-size: 13px;\n  font-weight: 600;\n"], ["\n  display: inline-block;\n  padding: 5px 10px;\n  margin: 0 0.5em 0.5em 0;\n  border-radius: 2px;\n  text-decoration: none;\n  font-size: 13px;\n  font-weight: 600;\n"])));
-export var PillGreyLight = styled(Pill)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: var(--grey800);\n  color: var(--grey100);\n\n  &:hover {\n    color: white;\n    background: var(--grey300);\n  }\n"], ["\n  background: var(--grey800);\n  color: var(--grey100);\n\n  &:hover {\n    color: white;\n    background: var(--grey300);\n  }\n"])));
-export var PillAccentLight = styled(Pill)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: var(--accent400);\n  color: var(--grey100);\n\n  &:hover {\n    color: #fff;\n    background: var(--accent300);\n  }\n"], ["\n  background: var(--accent400);\n  color: var(--grey100);\n\n  &:hover {\n    color: #fff;\n    background: var(--accent300);\n  }\n"])));
-export var PillAccentLightOutlined = styled(Pill)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid var(--accent300);\n  color: var(--accent200);\n\n  &:hover {\n    color: #fff;\n    background: var(--accent300);\n  }\n"], ["\n  border: 1px solid var(--accent300);\n  color: var(--accent200);\n\n  &:hover {\n    color: #fff;\n    background: var(--accent300);\n  }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export const Pill = styled.div`
+  display: inline-block;
+  padding: 5px 10px;
+  margin: 0 0.5em 0.5em 0;
+  border-radius: 2px;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 600;
+`;
+export const PillGreyLight = styled(Pill)`
+  background: var(--grey800);
+  color: var(--grey100);
+
+  &:hover {
+    color: white;
+    background: var(--grey300);
+  }
+`;
+export const PillAccentLight = styled(Pill)`
+  background: var(--accent400);
+  color: var(--grey100);
+
+  &:hover {
+    color: #fff;
+    background: var(--accent300);
+  }
+`;
+export const PillAccentLightOutlined = styled(Pill)`
+  border: 1px solid var(--accent300);
+  color: var(--accent200);
+
+  &:hover {
+    color: #fff;
+    background: var(--accent300);
+  }
+`;

package/Progress/ProgressCircular.mjs

@@ -1,15 +1,53 @@
-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);
+const animationRotation = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const animationCircle = keyframes`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+`;
+const ProgressCircularSvg = styled.svg`
+  animation: ${animationRotation} 1.5s linear infinite;
+`;
+const ProgressCircularCircle = styled.circle`
+  animation: ${animationCircle} 1.5s linear infinite;
+`;
 /**
  * @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 } }) })));
+ */ export const ProgressCircular = ({ size = "1em", thickness = 1, color = "currentColor", ...props })=>{
+    return /*#__PURE__*/ _jsx(ProgressCircularSvg, {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 44 44",
+        style: {
+            width: size,
+            height: size
+        },
+        ...props,
+        children: /*#__PURE__*/ _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.mjs

@@ -1,24 +1,44 @@
-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__*/ _jsx(ProgressLinearBg, {
+        style: {
+            height,
+            background: bg
+        },
+        ...props,
+        children: /*#__PURE__*/ _jsx(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.mjs

@@ -1,24 +1,64 @@
-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__*/ _jsxs(ProgressOverlayWrap, {
+        animate: {
+            opacity: running ? 1 : 0
+        },
+        initial: {
+            opacity: 0
+        },
+        transition: {
+            type: "easeInOut"
+        },
+        children: [
+            /*#__PURE__*/ _jsx(ProgressLinear, {
+                bg: "var(--accent400)",
+                fg: "var(--accent300)",
+                done: !running
+            }),
+            /*#__PURE__*/ _jsx(ProgressOverlayCenterer, {
+                style: {
+                    top: headerHeight + "px"
+                },
+                children: /*#__PURE__*/ _jsx(ProgressCircular, {
+                    size: "50px",
+                    color: "var(--accent300)"
+                })
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2;

package/Rating/Rating.d.ts

@@ -9,12 +9,12 @@ export type RatingStarProps = React.ComponentPropsWithoutRef<"svg"> & RatingStar
     /** @default "#947813" */
     colorStroke?: React.CSSProperties["color"];
 };
-export declare const RatingStarRoot: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
+export declare const RatingStarRoot: any;
 export declare const RatingStar: ({ value, colorBg, colorStroke, size, ...props }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RatingDetails: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingCount: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingValue: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const RatingDetails: any;
+export declare const RatingCount: any;
+export declare const RatingValue: any;
+export declare const RatingRoot: any;
 export type RatingStarModel = {
     value: number;
     idx?: number;