@koine/react 1.1.10 → 1.1.11

package/MenuItem/MenuItemMui.js

@@ -1,15 +1,18 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useMenuItem } from "@mui/base/MenuItemUnstyled";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var MenuItemUnstyled_1 = require("@mui/base/MenuItemUnstyled");
 // import { useMenuItem } from "./useMenuItem";
-import clsx from "@koine/utils/clsx";
-export var MenuItem = forwardRef(function MenuItem(props, ref) {
-    var _a = props.as, As = _a === void 0 ? "button" : _a, children = props.children, className = props.className, disabledProp = props.disabled, other = __rest(props, ["as", "children", "className", "disabled"]);
-    var _b = useMenuItem({
+var clsx_1 = tslib_1.__importDefault(require("@koine/utils/clsx"));
+exports.MenuItem = (0, react_1.forwardRef)(function MenuItem(props, ref) {
+    var _a = props.as, As = _a === void 0 ? "button" : _a, children = props.children, className = props.className, disabledProp = props.disabled, other = tslib_1.__rest(props, ["as", "children", "className", "disabled"]);
+    var _b = (0, MenuItemUnstyled_1.useMenuItem)({
         ref: ref,
         disabled: disabledProp,
     }), getRootProps = _b.getRootProps, disabled = _b.disabled, focusVisible = _b.focusVisible;
-    return (_jsx(As, __assign({ className: clsx(focusVisible && "", disabled && "", className) }, getRootProps(other), { children: children })));
+    return ((0, jsx_runtime_1.jsx)(As, tslib_1.__assign({ className: (0, clsx_1.default)(focusVisible && "", disabled && "", className) }, getRootProps(other), { children: children })));
 });
-export default MenuItem;
+exports.default = exports.MenuItem;

package/MenuItem/MenuItemMui.mjs

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useMenuItem } from "@mui/base/MenuItemUnstyled";
+// import { useMenuItem } from "./useMenuItem";
+import clsx from "@koine/utils/clsx";
+export var MenuItem = forwardRef(function MenuItem(props, ref) {
+    var _a = props.as, As = _a === void 0 ? "button" : _a, children = props.children, className = props.className, disabledProp = props.disabled, other = __rest(props, ["as", "children", "className", "disabled"]);
+    var _b = useMenuItem({
+        ref: ref,
+        disabled: disabledProp,
+    }), getRootProps = _b.getRootProps, disabled = _b.disabled, focusVisible = _b.focusVisible;
+    return (_jsx(As, __assign({ className: clsx(focusVisible && "", disabled && "", className) }, getRootProps(other), { children: children })));
+});
+export default MenuItem;

package/MenuItem/index.js

@@ -1 +1,4 @@
-export * from "./MenuItem";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./MenuItem"), exports);

package/MenuItem/index.mjs

@@ -0,0 +1 @@
+export * from "./MenuItem";

package/MenuItem/package.json

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

package/MenuItem/useMenuItem.js

@@ -1,20 +1,23 @@
-import { __assign } from "tslib";
-import { useCallback, useContext, useEffect, useId, useRef, useState, } from "react";
-import { unstable_useForkRef as useForkRef } from "@mui/utils";
-import { MenuUnstyledContext } from "@mui/base/MenuUnstyled";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuItem = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var utils_1 = require("@mui/utils");
+var MenuUnstyled_1 = require("@mui/base/MenuUnstyled");
 // import { unstable_useIsFocusVisible as useIsFocusVisible } from "@mui/utils";
-export function useMenuItem(props) {
+function useMenuItem(props) {
     var _a;
     var _b = props.disabled, disabled = _b === void 0 ? false : _b, ref = props.ref, label = props.label;
-    var id = useId();
-    var menuContext = useContext(MenuUnstyledContext);
-    var itemRef = useRef(null);
-    var handleRef = useForkRef(itemRef, ref);
+    var id = (0, react_1.useId)();
+    var menuContext = (0, react_1.useContext)(MenuUnstyled_1.MenuUnstyledContext);
+    var itemRef = (0, react_1.useRef)(null);
+    var handleRef = (0, utils_1.unstable_useForkRef)(itemRef, ref);
     if (menuContext === null) {
         throw new Error("MenuItemUnstyled must be used within a MenuUnstyled");
     }
     var registerItem = menuContext.registerItem, unregisterItem = menuContext.unregisterItem, open = menuContext.open;
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         registerItem(id, { disabled: disabled, id: id, ref: itemRef, label: label });
         return function () { return unregisterItem(id); };
     }, [id, registerItem, unregisterItem, disabled, ref, label]);
@@ -24,26 +27,26 @@ export function useMenuItem(props) {
     //   ref: handleRef,
     // });
     // Ensure the menu item is focused when highlighted
-    var _c = useState(false), focusRequested = _c[0], requestFocus = _c[1];
-    var focusIfRequested = useCallback(function () {
+    var _c = (0, react_1.useState)(false), focusRequested = _c[0], requestFocus = _c[1];
+    var focusIfRequested = (0, react_1.useCallback)(function () {
         if (focusRequested && itemRef.current != null) {
             itemRef.current.focus();
             requestFocus(false);
         }
     }, [focusRequested]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         focusIfRequested();
     });
     // useDebugValue({ id, disabled, label });
     var itemState = menuContext.getItemState(id !== null && id !== void 0 ? id : "");
     var highlighted = (itemState !== null && itemState !== void 0 ? itemState : { highlighted: false }).highlighted;
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         requestFocus(highlighted && open);
     }, [highlighted, open]);
     return {
         getRootProps: function (other) {
             var optionProps = menuContext.getItemProps(id, other);
-            return __assign(__assign({}, other), { 
+            return tslib_1.__assign(tslib_1.__assign({}, other), { 
                 // ...getButtonProps(other),
                 // @ts-expect-error type from @mui/base is not specific
                 tabIndex: optionProps.tabIndex, 
@@ -55,4 +58,5 @@ export function useMenuItem(props) {
         ref: handleRef,
     };
 }
-export default useMenuItem;
+exports.useMenuItem = useMenuItem;
+exports.default = useMenuItem;

package/{node/MenuItem/useMenuItem.js → MenuItem/useMenuItem.mjs}

@@ -1,23 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMenuItem = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var utils_1 = require("@mui/utils");
-var MenuUnstyled_1 = require("@mui/base/MenuUnstyled");
+import { __assign } from "tslib";
+import { useCallback, useContext, useEffect, useId, useRef, useState, } from "react";
+import { unstable_useForkRef as useForkRef } from "@mui/utils";
+import { MenuUnstyledContext } from "@mui/base/MenuUnstyled";
 // import { unstable_useIsFocusVisible as useIsFocusVisible } from "@mui/utils";
-function useMenuItem(props) {
+export function useMenuItem(props) {
     var _a;
     var _b = props.disabled, disabled = _b === void 0 ? false : _b, ref = props.ref, label = props.label;
-    var id = (0, react_1.useId)();
-    var menuContext = (0, react_1.useContext)(MenuUnstyled_1.MenuUnstyledContext);
-    var itemRef = (0, react_1.useRef)(null);
-    var handleRef = (0, utils_1.unstable_useForkRef)(itemRef, ref);
+    var id = useId();
+    var menuContext = useContext(MenuUnstyledContext);
+    var itemRef = useRef(null);
+    var handleRef = useForkRef(itemRef, ref);
     if (menuContext === null) {
         throw new Error("MenuItemUnstyled must be used within a MenuUnstyled");
     }
     var registerItem = menuContext.registerItem, unregisterItem = menuContext.unregisterItem, open = menuContext.open;
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         registerItem(id, { disabled: disabled, id: id, ref: itemRef, label: label });
         return function () { return unregisterItem(id); };
     }, [id, registerItem, unregisterItem, disabled, ref, label]);
@@ -27,26 +24,26 @@ function useMenuItem(props) {
     //   ref: handleRef,
     // });
     // Ensure the menu item is focused when highlighted
-    var _c = (0, react_1.useState)(false), focusRequested = _c[0], requestFocus = _c[1];
-    var focusIfRequested = (0, react_1.useCallback)(function () {
+    var _c = useState(false), focusRequested = _c[0], requestFocus = _c[1];
+    var focusIfRequested = useCallback(function () {
         if (focusRequested && itemRef.current != null) {
             itemRef.current.focus();
             requestFocus(false);
         }
     }, [focusRequested]);
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         focusIfRequested();
     });
     // useDebugValue({ id, disabled, label });
     var itemState = menuContext.getItemState(id !== null && id !== void 0 ? id : "");
     var highlighted = (itemState !== null && itemState !== void 0 ? itemState : { highlighted: false }).highlighted;
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         requestFocus(highlighted && open);
     }, [highlighted, open]);
     return {
         getRootProps: function (other) {
             var optionProps = menuContext.getItemProps(id, other);
-            return tslib_1.__assign(tslib_1.__assign({}, other), { 
+            return __assign(__assign({}, other), { 
                 // ...getButtonProps(other),
                 // @ts-expect-error type from @mui/base is not specific
                 tabIndex: optionProps.tabIndex, 
@@ -58,5 +55,4 @@ function useMenuItem(props) {
         ref: handleRef,
     };
 }
-exports.useMenuItem = useMenuItem;
-exports.default = useMenuItem;
+export default useMenuItem;

package/Meta/Meta.js

@@ -1,6 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export var Meta = function (_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Meta = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+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") }));
+    return ((0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1, maximum-scale=1".concat(zoom ? "" : ", user-scalable=0") }));
 };
-export default Meta;
+exports.Meta = Meta;
+exports.default = exports.Meta;

package/Meta/Meta.mjs

@@ -0,0 +1,6 @@
+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 default Meta;

package/Meta/index.js

@@ -1,2 +1,7 @@
-export * from "./Meta";
-export { Meta as default } from "./Meta";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Meta"), exports);
+var Meta_1 = require("./Meta");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Meta_1.Meta; } });

package/Meta/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Meta";
+export { Meta as default } from "./Meta";

package/Meta/package.json

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

package/NoJs/NoJs.js

@@ -1,7 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export var NoJs = function (_props) {
-    return (_jsx("script", { id: "no-js", dangerouslySetInnerHTML: {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoJs = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var NoJs = function (_props) {
+    return ((0, jsx_runtime_1.jsx)("script", { id: "no-js", dangerouslySetInnerHTML: {
             __html: "document.querySelector(\"html\").className=document.querySelector(\"html\").className.replace(/no-js/,\"\") + \"js\";",
         } }));
 };
-export default NoJs;
+exports.NoJs = NoJs;
+exports.default = exports.NoJs;

package/NoJs/NoJs.mjs

@@ -0,0 +1,7 @@
+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 default NoJs;

package/NoJs/index.js

@@ -1,2 +1,7 @@
-export * from "./NoJs";
-export { NoJs as default } from "./NoJs";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./NoJs"), exports);
+var NoJs_1 = require("./NoJs");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return NoJs_1.NoJs; } });

package/NoJs/index.mjs

@@ -0,0 +1,2 @@
+export * from "./NoJs";
+export { NoJs as default } from "./NoJs";

package/NoJs/package.json

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

package/Pagination/PaginationNav.js

@@ -1,16 +1,19 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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"])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoinePaginationNav = 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 cg_1 = require("react-icons/cg");
+var ensureInt_1 = tslib_1.__importDefault(require("@koine/utils/ensureInt"));
+var Root = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = tslib_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 ItemCurrent = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__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_components_1.default.a(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), item, function (props) { return (props.prev ? "color: var(--grey100);" : ""); });
+var DotsSeparator = styled_components_1.default.span(templateObject_4 || (templateObject_4 = tslib_1.__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);
+var ItemPrev = styled_components_1.default.a(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), arrow);
+var ItemNext = styled_components_1.default.a(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), arrow);
 /*
  * Possible outcomes:
  * [1] 2 3 ... 78 >
@@ -19,11 +22,11 @@ var ItemNext = styled.a(templateObject_6 || (templateObject_6 = __makeTemplateOb
  * < 1 ... 75 76 [77] 78 >
  * < 1 ... 76 77 [78]
  */
-export var KoinePaginationNav = function (_a) {
+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;
-    total = ensureInt(total);
-    currentPage = ensureInt(currentPage);
-    perPage = ensureInt(perPage);
+    total = (0, ensureInt_1.default)(total);
+    currentPage = (0, ensureInt_1.default)(currentPage);
+    perPage = (0, ensureInt_1.default)(perPage);
     // page 0 means 1
     currentPage = currentPage || 1;
     baseUrl = baseUrl || currentUrl;
@@ -54,8 +57,9 @@ export var KoinePaginationNav = function (_a) {
     }
     var prevDots = pages[0] > firstPage + 1;
     var nextDots = pages[pages.length - 1] < lastPage - 1;
-    return (_jsxs(Root, { children: [prevArrow && (_jsx(ItemPrev, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(prevPage) }, { children: _jsx(IconArrowLeft, {}) }))), firstPage !== currentPage && (_jsx(ItemLink, __assign({ 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, __assign({ 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, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true }, { children: lastPage }))), nextArrow && (_jsx(ItemNext, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(nextPage) }, { children: _jsx(IconArrowRight, {}) })))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, { children: [prevArrow && ((0, jsx_runtime_1.jsx)(ItemPrev, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(prevPage) }, { children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowLeftR, {}) }))), firstPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl), prev: true }, { children: firstPage }))), prevDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), pages.map(function (page) {
+                return page === currentPage ? ((0, jsx_runtime_1.jsx)(ItemCurrent, { children: page }, page)) : ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(page), prev: page < currentPage, next: page > currentPage }, { children: page }), "pagination-".concat(page)));
+            }), nextDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), lastPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true }, { children: lastPage }))), nextArrow && ((0, jsx_runtime_1.jsx)(ItemNext, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(nextPage) }, { children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowRightR, {}) })))] }));
 };
+exports.KoinePaginationNav = KoinePaginationNav;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Pagination/PaginationNav.mjs

@@ -0,0 +1,61 @@
+import { __assign, __makeTemplateObject } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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);
+/*
+ * Possible outcomes:
+ * [1] 2 3 ... 78 >
+ * < 1 2 [3] 4 5 ... 78 >
+ * < 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;
+    total = ensureInt(total);
+    currentPage = ensureInt(currentPage);
+    perPage = ensureInt(perPage);
+    // page 0 means 1
+    currentPage = currentPage || 1;
+    baseUrl = baseUrl || currentUrl;
+    // don't output anything if pagination is not needed
+    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 = [];
+    // fill the pages before the current
+    for (var i = currentPage - showOffset; i < currentPage; i++) {
+        if (i > 1) {
+            pages.push(i);
+        }
+    }
+    // add the current
+    pages.push(currentPage);
+    // fill the pages after the current
+    for (var 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, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(prevPage) }, { children: _jsx(IconArrowLeft, {}) }))), firstPage !== currentPage && (_jsx(ItemLink, __assign({ 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, __assign({ 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, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true }, { children: lastPage }))), nextArrow && (_jsx(ItemNext, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(nextPage) }, { children: _jsx(IconArrowRight, {}) })))] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Pagination/PaginationResults.js

@@ -1,11 +1,15 @@
-import { __assign, __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) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationResults = 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 Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  // overflow: hidden;\n"], ["\n  // overflow: hidden;\n"])));
+var Inner = (0, styled_components_1.default)(framer_motion_1.m.div)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject([""], [""])));
+var PaginationResults = function (_a) {
     var children = _a.children;
-    return (_jsx(AnimatePresence, __assign({ exitBeforeEnter: true, initial: true }, { children: _jsx(Root, { children: _jsx(Inner, __assign({ initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 } }, { children: children })) }) })));
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, tslib_1.__assign({ exitBeforeEnter: true, initial: true }, { children: (0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsx)(Inner, tslib_1.__assign({ initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 } }, { children: children })) }) })));
 };
+exports.PaginationResults = PaginationResults;
 var templateObject_1, templateObject_2;

package/Pagination/PaginationResults.mjs

@@ -0,0 +1,11 @@
+import { __assign, __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, __assign({ exitBeforeEnter: true, initial: true }, { children: _jsx(Root, { children: _jsx(Inner, __assign({ 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/Pagination/index.js

@@ -1,2 +1,5 @@
-export * from "./PaginationNav";
-export * from "./PaginationResults";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./PaginationNav"), exports);
+tslib_1.__exportStar(require("./PaginationResults"), exports);

package/Pagination/index.mjs

@@ -0,0 +1,2 @@
+export * from "./PaginationNav";
+export * from "./PaginationResults";

package/Pagination/package.json

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

package/Pill/Pill.js

@@ -1,7 +1,10 @@
-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"])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PillAccentLightOutlined = exports.PillAccentLight = exports.PillGreyLight = exports.Pill = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.Pill = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_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"])));
+exports.PillGreyLight = (0, styled_components_1.default)(exports.Pill)(templateObject_2 || (templateObject_2 = tslib_1.__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"])));
+exports.PillAccentLight = (0, styled_components_1.default)(exports.Pill)(templateObject_3 || (templateObject_3 = tslib_1.__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"])));
+exports.PillAccentLightOutlined = (0, styled_components_1.default)(exports.Pill)(templateObject_4 || (templateObject_4 = tslib_1.__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;

package/Pill/Pill.mjs

@@ -0,0 +1,7 @@
+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;

package/Pill/index.js

@@ -1 +1,4 @@
-export * from "./Pill";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Pill"), exports);

package/Pill/index.mjs

@@ -0,0 +1 @@
+export * from "./Pill";

package/Pill/package.json

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

package/Progress/ProgressCircular.js

@@ -1,15 +1,19 @@
-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);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressCircular = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importStar(require("styled-components"));
+var animationRotation = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = tslib_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 = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = tslib_1.__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_components_1.default.svg(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  animation: ", " 1.5s linear infinite;\n"], ["\n  animation: ", " 1.5s linear infinite;\n"])), animationRotation);
+var ProgressCircularCircle = styled_components_1.default.circle(templateObject_4 || (templateObject_4 = tslib_1.__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 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 = tslib_1.__rest(_a, ["size", "thickness", "color"]);
+    return ((0, jsx_runtime_1.jsx)(ProgressCircularSvg, tslib_1.__assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 44 44", style: { width: size, height: size } }, props, { children: (0, jsx_runtime_1.jsx)(ProgressCircularCircle, { cx: "22", cy: "22", r: "20", fill: "none", strokeWidth: thickness, style: { stroke: color } }) })));
 };
+exports.ProgressCircular = ProgressCircular;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;