@koine/react 1.0.9 → 1.0.12

package/Gauge/Gauge.js

@@ -1,6 +1,6 @@
 // import styled, { keyframes } from "styled-components";
 // import { m } from "framer-motion";
-export const Gauge = (_props) => null;
+export var Gauge = function (_props) { return null; };
 // export type GaugeProps = {
 //   /** In percentage */
 //   value: number;

package/Grid/Grid.js

@@ -1,60 +1,33 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const GRID_COLUMNS = 12;
-export const GRID_GUTTER_DEFAULT = "half";
-export const Container = styled.div `
-  max-width: ${(p) => p.theme.breakpoints[p.size]}px;
-  margin: 0 auto;
-  padding: 0 ${(p) => p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
-  ${(p) => (p.clamp ? "overflow: hidden;" : "")}
-`;
-export const ContainerFluid = styled.div `
-  padding: 0 ${(p) => p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
-`;
-export const Row = styled.div `
-  margin: 0 -${(p) => p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
-  display: flex;
-  ${(p) => (p.$noWrap ? "overflow: auto;" : "flex-wrap: wrap;")}
-  ${(p) => (p.$valign ? `align-items: ${p.$valign}` : "")};
-  ${(p) => p.$reverse &&
-    `@media (${p.$reverse.split(":")[0]}-width: ${p.$reverse.split(":")[1]}px) {
-      flex-direction: row-reverse;
-    }`}
-`;
-export const Col = styled.div `
-  padding: 0 ${(p) => p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]}px;
-  display: ${(p) => (p.$flex ? "flex" : "block")};
-  ${(p) => (p.$valign ? "align-items: " + p.$valign : "")};
-  ${(p) => getColCss(p)};
-`;
+export var GRID_COLUMNS = 12;
+export var GRID_GUTTER_DEFAULT = "half";
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: ", "px;\n  margin: 0 auto;\n  padding: 0 ", "px;\n  ", "\n"], ["\n  max-width: ", "px;\n  margin: 0 auto;\n  padding: 0 ", "px;\n  ", "\n"])), function (p) { return p.theme.breakpoints[p.size]; }, function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.clamp ? "overflow: hidden;" : ""); });
+export var ContainerFluid = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; });
+export var Row = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 -", "px;\n  display: flex;\n  ", "\n  ", ";\n  ", "\n"], ["\n  margin: 0 -", "px;\n  display: flex;\n  ", "\n  ", ";\n  ", "\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.$noWrap ? "overflow: auto;" : "flex-wrap: wrap;"); }, function (p) { return (p.$valign ? "align-items: ".concat(p.$valign) : ""); }, function (p) {
+    return p.$reverse &&
+        "@media (".concat(p.$reverse.split(":")[0], "-width: ").concat(p.$reverse.split(":")[1], "px) {\n      flex-direction: row-reverse;\n    }");
+});
+export var Col = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0 ", "px;\n  display: ", ";\n  ", ";\n  ", ";\n"], ["\n  padding: 0 ", "px;\n  display: ", ";\n  ", ";\n  ", ";\n"])), function (p) { return p.theme.gutter[p.$gutter || GRID_GUTTER_DEFAULT]; }, function (p) { return (p.$flex ? "flex" : "block"); }, function (p) { return (p.$valign ? "align-items: " + p.$valign : ""); }, function (p) { return getColCss(p); });
 function getColWidth(breakpoints, breakpoint, value) {
-    const breakpointValue = breakpoints[breakpoint] + "px";
-    const width = (value * 100) / GRID_COLUMNS;
-    const cssValue = `
-    min-width: ${width}%;
-    flex: 0 0 ${width}%;
-`;
+    var breakpointValue = breakpoints[breakpoint] + "px";
+    var width = (value * 100) / GRID_COLUMNS;
+    var cssValue = "\n    min-width: ".concat(width, "%;\n    flex: 0 0 ").concat(width, "%;\n");
     if (breakpoint === Object.keys(breakpoints)[0]) {
         return cssValue;
     }
-    return `
-  @media (min-width: ${breakpointValue}){
-    ${cssValue}
-  }`;
+    return "\n  @media (min-width: ".concat(breakpointValue, "){\n    ").concat(cssValue, "\n  }");
 }
 function getColCss(props) {
-    const { $auto, $offset, $width } = props;
-    const { breakpoints } = props.theme;
-    let css = "";
+    var $auto = props.$auto, $offset = props.$offset, $width = props.$width;
+    var breakpoints = props.theme.breakpoints;
+    var css = "";
     if ($offset) {
-        const offsets = $offset.split(",");
-        for (let i = 0; i <= offsets.length; i++) {
+        var offsets = $offset.split(",");
+        for (var i = 0; i <= offsets.length; i++) {
             if (offsets[i]) {
-                const [offsetBreakpoint, offsetSize] = offsets[i].split(":");
-                css += ` 
-          @media(min-width: ${breakpoints[offsetBreakpoint]}px){
-            margin-left: ${(100 * offsetSize) / GRID_COLUMNS}%;
-          }
-        `;
+                var _a = offsets[i].split(":"), offsetBreakpoint = _a[0], offsetSize = _a[1];
+                css += " \n          @media(min-width: ".concat(breakpoints[offsetBreakpoint], "px){\n            margin-left: ").concat((100 * offsetSize) / GRID_COLUMNS, "%;\n          }\n        ");
             }
         }
     }
@@ -62,11 +35,11 @@ function getColCss(props) {
         // do nothing, width is set explicitly
     }
     else if ($auto) {
-        css += `flex: 0 0 auto; width: auto; max-width: none;`;
+        css += "flex: 0 0 auto; width: auto; max-width: none;";
     }
     else {
-        for (const breakpoint in breakpoints) {
-            const value = props[breakpoint];
+        for (var breakpoint in breakpoints) {
+            var value = props[breakpoint];
             if (typeof value !== "undefined") {
                 css += getColWidth(breakpoints, breakpoint, value);
             }
@@ -77,3 +50,4 @@ function getColCss(props) {
     }
     return css;
 }
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Hamburger/Hamburger.js

@@ -1,3 +1,4 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @file
@@ -5,60 +6,47 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Simplified from https://github.com/luukdv/hamburger-react
  */
 import styled from "styled-components";
-const HamburgerLabel = styled.div `
-  position: absolute;
-  top: 30px;
-  font-size: ${({ $toggled }) => ($toggled ? "0" : "9px")};
-  text-transform: uppercase;
-  left: 7px;
-  letter-spacing: 3px;
-`;
-const area = 48;
-const lines = 3;
-const width = 32;
-const room = Math.round((area - width) / 2);
-const barHeightRaw = width / 12;
-const barHeight = Math.round(barHeightRaw);
-const space = 0.5;
-const marginRaw = width / (lines * (space + (lines === 3 ? 1 : 1.25)));
-const margin = Math.round(marginRaw);
-const height = barHeight * lines + margin * (lines - 1);
-const topOffset = Math.round((area - height) / 2);
-const translate = 4.6325;
-const deviation = (barHeightRaw - barHeight + (marginRaw - margin)) / (lines === 3 ? 1 : 2);
-const move = parseFloat((width / translate - deviation / (4 / 3)).toFixed(2));
-const time = 0.4;
-const easing = "cubic-bezier(0, 0, 0, 1)";
-const transition = `${time}s ${easing}`;
-const burgerStyles = {
+var HamburgerLabel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  font-size: ", ";\n  text-transform: uppercase;\n  left: 7px;\n  letter-spacing: 3px;\n"], ["\n  position: absolute;\n  top: 30px;\n  font-size: ", ";\n  text-transform: uppercase;\n  left: 7px;\n  letter-spacing: 3px;\n"])), function (_a) {
+    var $toggled = _a.$toggled;
+    return ($toggled ? "0" : "9px");
+});
+var area = 48;
+var lines = 3;
+var width = 32;
+var room = Math.round((area - width) / 2);
+var barHeightRaw = width / 12;
+var barHeight = Math.round(barHeightRaw);
+var space = 0.5;
+var marginRaw = width / (lines * (space + (lines === 3 ? 1 : 1.25)));
+var margin = Math.round(marginRaw);
+var height = barHeight * lines + margin * (lines - 1);
+var topOffset = Math.round((area - height) / 2);
+var translate = 4.6325;
+var deviation = (barHeightRaw - barHeight + (marginRaw - margin)) / (lines === 3 ? 1 : 2);
+var move = parseFloat((width / translate - deviation / (4 / 3)).toFixed(2));
+var time = 0.4;
+var easing = "cubic-bezier(0, 0, 0, 1)";
+var transition = "".concat(time, "s ").concat(easing);
+var burgerStyles = {
     marginRight: "-8px",
     position: "relative",
-    width: `${area}px`,
-    height: `${area}px`,
+    width: "".concat(area, "px"),
+    height: "".concat(area, "px"),
     userSelect: "none",
     outline: "0px",
     cursor: "pointer",
-    transition,
+    transition: transition,
 };
-const barStyles = {
+var barStyles = {
     position: "absolute",
-    width: `${width}px`,
-    height: `${barHeight}px`,
-    left: `${room}px`,
+    width: "".concat(width, "px"),
+    height: "".concat(barHeight, "px"),
+    left: "".concat(room, "px"),
     background: "currentColor",
-    transition,
+    transition: transition,
 };
-export const Hamburger = ({ toggled, ...props }) => {
-    return (_jsxs("div", { style: {
-            ...burgerStyles,
-            transform: `${toggled ? `rotate(90deg)` : "none"}`,
-        }, tabIndex: 0, ...props, children: [_jsx("div", { style: {
-                    ...barStyles,
-                    top: `${topOffset}px`,
-                    transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`,
-                } }), _jsx("div", { style: {
-                    ...barStyles,
-                    top: `${topOffset + barHeight + margin}px`,
-                    transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`,
-                } }), _jsx(HamburgerLabel, { "$toggled": toggled, children: "Menu" })] }));
+export var Hamburger = function (_a) {
+    var toggled = _a.toggled, props = __rest(_a, ["toggled"]);
+    return (_jsxs("div", __assign({ style: __assign(__assign({}, burgerStyles), { transform: "".concat(toggled ? "rotate(90deg)" : "none") }), tabIndex: 0 }, props, { children: [_jsx("div", { style: __assign(__assign({}, barStyles), { top: "".concat(topOffset, "px"), transform: "".concat(toggled ? "rotate(-45deg) translate(0px, ".concat(move, "px)") : "none") }) }), _jsx("div", { style: __assign(__assign({}, barStyles), { top: "".concat(topOffset + barHeight + margin, "px"), transform: "".concat(toggled ? "rotate(45deg) translate(0, -".concat(move, "px)") : "none") }) }), _jsx(HamburgerLabel, __assign({ "$toggled": toggled }, { children: "Menu" }))] })));
 };
+var templateObject_1;

package/Header/useHeader.js

@@ -2,21 +2,21 @@ import { useEffect, useState } from "react";
 import { useScrollPosition } from "../hooks/useScrollPosition";
 import { useTheme } from "../styles/theme";
 import { useMedia } from "../styles/media";
-export const useHeader = () => {
-    const [isSticky, setIsSticky] = useState(false);
-    const { header: themed } = useTheme();
-    const isDesktopLayout = useMedia(`min:${themed.breakpoint}`);
-    const valueIdx = isDesktopLayout ? 1 : 0;
-    const [headerHeight, setHeaderHeight] = useState(themed.height[valueIdx]);
-    const [placeholderHeight, setPlaceholderHeight] = useState(themed.height[valueIdx]);
-    const [logoWidth, setLogoWidth] = useState(themed.logoWidth[valueIdx]);
-    useScrollPosition((currentPosition) => {
-        const isPastThreshold = currentPosition.y * -1 > 40;
+export var useHeader = function () {
+    var _a = useState(false), isSticky = _a[0], setIsSticky = _a[1];
+    var themed = useTheme().header;
+    var isDesktopLayout = useMedia("min:".concat(themed.breakpoint));
+    var valueIdx = isDesktopLayout ? 1 : 0;
+    var _b = useState(themed.height[valueIdx]), headerHeight = _b[0], setHeaderHeight = _b[1];
+    var _c = useState(themed.height[valueIdx]), placeholderHeight = _c[0], setPlaceholderHeight = _c[1];
+    var _d = useState(themed.logoWidth[valueIdx]), logoWidth = _d[0], setLogoWidth = _d[1];
+    useScrollPosition(function (currentPosition) {
+        var isPastThreshold = currentPosition.y * -1 > 40;
         if (isSticky !== isPastThreshold)
             setIsSticky(isPastThreshold);
     }, [isSticky]);
-    useEffect(() => {
-        const valueIdx = isDesktopLayout ? 1 : 0;
+    useEffect(function () {
+        var valueIdx = isDesktopLayout ? 1 : 0;
         setPlaceholderHeight(themed.height[valueIdx]);
         setHeaderHeight(isSticky ? themed.heightSticky[valueIdx] : themed.height[valueIdx]);
         setLogoWidth(isSticky ? themed.logoWidthSticky[valueIdx] : themed.logoWidth[valueIdx]);

package/Hidden/Hidden.js

@@ -1,14 +1,10 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const Hidden = styled.div `
-  ${(p) => `${p.$min
-    ? `
-  @media (min-width: ${p.theme.breakpoints[p.$min]}px) {
-    display: none;
-  }`
-    : ""} ${p.$max
-    ? `
-  @media (max-width: ${p.theme.breakpoints[p.$max]}px) {
-    display: none;
-  }`
-    : ""}`}
-`;
+export var Hidden = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return "".concat(p.$min
+        ? "\n  @media (min-width: ".concat(p.theme.breakpoints[p.$min], "px) {\n    display: none;\n  }")
+        : "", " ").concat(p.$max
+        ? "\n  @media (max-width: ".concat(p.theme.breakpoints[p.$max], "px) {\n    display: none;\n  }")
+        : "");
+});
+var templateObject_1;

package/Img/sc/bare.js

@@ -1,9 +1,11 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
 // export type KoineImgProps = {
 //   /** @default "cover" */
 //   $fit?: "cover" | "contain";
 // };
-export const KoineImg = styled.img ``;
+export var KoineImg = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;
 // export const KoineImg = styled.img<KoineImgProps>`
 //   object-fit: ${(p) => p.$fit || "cover"};
 // `;

package/Link/Link.js

@@ -1,2 +1,4 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const KoineLink = styled.a ``;
+export var KoineLink = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;

package/Link/LinkBlank.js

@@ -1,26 +1,17 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { MdLaunch as IconOutboundLink } from "react-icons/md";
 import { max } from "../styles/media";
-export const LinkBlankA = styled.a.attrs({
+export var LinkBlankA = styled.a.attrs({
     target: "_blank",
     rel: "noopener",
-}) ``;
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 // TODO: use `touch` class on <html> instead of relying on screenwidth,
 // probably implement a lean Modernizr like thing with react-helmet
-export const LinkBlankIcon = styled(IconOutboundLink) `
-  color: var(---grey100);
-  font-size: inherit;
-  margin-left: 3px;
-  line-height: inherit;
-  vertical-align: middle;
-  width: 0px;
-  transition: width 0.1s ease-in-out;
-  ${max.sm} {
-    width: 20px;
-    opacity: 0.8;
-  }
-`;
-export const LinkBlank = ({ children, target, rel, ...props }) => {
-    return (_jsxs(LinkBlankA, { ...props, children: [children, _jsx(LinkBlankIcon, {})] }));
+export var LinkBlankIcon = styled(IconOutboundLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"], ["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"])), max.sm);
+export var LinkBlank = function (_a) {
+    var children = _a.children, target = _a.target, rel = _a.rel, props = __rest(_a, ["children", "target", "rel"]);
+    return (_jsxs(LinkBlankA, __assign({}, props, { children: [children, _jsx(LinkBlankIcon, {})] })));
 };
+var templateObject_1, templateObject_2;

package/Menu/Menu.js

@@ -1,11 +1,4 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const Menu = styled.ul `
-  z-index: 3;
-  position: absolute;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  background: #fff;
-  width: 100%;
-  box-shadow: var(--shadow);
-`;
+export var Menu = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"], ["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"])));
+var templateObject_1;

package/MenuItem/MenuItem.js

@@ -1,20 +1,4 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const MenuItem = styled.li `
-  padding: 8px 16px;
-
-  &[aria-selected="true"] {
-    background: var(--accent400);
-  }
-
-  /** DEP: this is just for MultiselectMui? */
-  &.Mui-focused,
-  &[data-focus="true"] {
-    background: var(--accent300);
-    color: white;
-  }
-
-  &:not([disabled]):hover {
-    cursor: pointer;
-    background: var(--accent300);
-  }
-`;
+export var MenuItem = styled.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px 16px;\n\n  &[aria-selected=\"true\"] {\n    background: var(--accent400);\n  }\n\n  /** DEP: this is just for MultiselectMui? */\n  &.Mui-focused,\n  &[data-focus=\"true\"] {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:not([disabled]):hover {\n    cursor: pointer;\n    background: var(--accent300);\n  }\n"], ["\n  padding: 8px 16px;\n\n  &[aria-selected=\"true\"] {\n    background: var(--accent400);\n  }\n\n  /** DEP: this is just for MultiselectMui? */\n  &.Mui-focused,\n  &[data-focus=\"true\"] {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:not([disabled]):hover {\n    cursor: pointer;\n    background: var(--accent300);\n  }\n"])));
+var templateObject_1;

package/Meta/Meta.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Meta = ({ zoom }) => {
-    return (_jsx("meta", { name: "viewport", content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}` }));
+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") }));
 };

package/NoJs/NoJs.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const NoJs = (_props) => {
+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";`,
+            __html: "document.querySelector(\"html\").className=document.querySelector(\"html\").className.replace(/no-js/,\"\") + \"js\";",
         } }));
 };

package/Pagination/PaginationNav.js

@@ -1,42 +1,16 @@
+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";
-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}
-`;
+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 >
@@ -45,7 +19,8 @@ const ItemNext = styled.a `
  * < 1 ... 75 76 [77] 78 >
  * < 1 ... 76 77 [78]
  */
-export const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showOffset = 2, currentUrl = "/", Link = "a", }) => {
+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);
@@ -56,15 +31,15 @@ export const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showO
     if (total < perPage) {
         return null;
     }
-    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 = [];
+    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 (let i = currentPage - showOffset; i < currentPage; i++) {
+    for (var i = currentPage - showOffset; i < currentPage; i++) {
         if (i > 1) {
             pages.push(i);
         }
@@ -72,12 +47,15 @@ export const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showO
     // add the current
     pages.push(currentPage);
     // fill the pages after the current
-    for (let i = currentPage + 1; i < currentPage + 1 + showOffset; i++) {
+    for (var i = currentPage + 1; i < currentPage + 1 + showOffset; i++) {
         if (i < lastPage) {
             pages.push(i);
         }
     }
-    const prevDots = pages[0] > firstPage + 1;
-    const nextDots = pages[pages.length - 1] < lastPage - 1;
-    return (_jsxs(Root, { children: [prevArrow && (_jsx(ItemPrev, { as: Link, href: `${baseUrl}/${prevPage}`, children: _jsx(IconArrowLeft, {}) })), firstPage !== currentPage && (_jsx(ItemLink, { as: Link, href: `${baseUrl}`, prev: true, children: firstPage })), prevDots && _jsx(DotsSeparator, { children: "..." }), pages.map((page) => page === currentPage ? (_jsx(ItemCurrent, { children: page }, page)) : (_jsx(ItemLink, { as: Link, href: `${baseUrl}/${page}`, prev: page < currentPage, next: page > currentPage, children: page }, `pagination-${page}`))), nextDots && _jsx(DotsSeparator, { children: "..." }), lastPage !== currentPage && (_jsx(ItemLink, { as: Link, href: `${baseUrl}/${lastPage}`, next: true, children: lastPage })), nextArrow && (_jsx(ItemNext, { as: Link, href: `${baseUrl}/${nextPage}`, children: _jsx(IconArrowRight, {}) }))] }));
+    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,10 +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";
-const Root = styled.div `
-  // overflow: hidden;
-`;
-const Inner = styled(m.div) ``;
-export const PaginationResults = ({ 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 }) }) }));
+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/Pill/Pill.js

@@ -1,37 +1,7 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-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);
-  }
-`;
+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/Progress/ProgressCircular.js

@@ -1,36 +1,15 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { keyframes } from "styled-components";
-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;
-`;
+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 const ProgressCircular = ({ size = "1em", thickness = 1, color = "currentColor", ...props }) => {
-    return (_jsx(ProgressCircularSvg, { 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 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;