@koine/react 2.0.0-alpha.4 → 2.0.0-beta.10

package/Pagination/PaginationNav.js

@@ -1,32 +1,57 @@
 "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_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_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 >
- * < 1 2 [3] 4 5 ... 78 >
- * < 1 ... 6 7 [8] 9 10 ... 78 >
- * < 1 ... 75 76 [77] 78 >
- * < 1 ... 76 77 [78]
- */
-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 = (0, ensureInt_1.default)(_currentPage);
-    total = (0, ensureInt_1.default)(total);
-    perPage = (0, ensureInt_1.default)(perPage);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "KoinePaginationNav", {
+    enumerable: true,
+    get: function() {
+        return KoinePaginationNav;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
+const _cg = require("react-icons/cg");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _ensureInt = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/ensureInt"));
+const Root = _styledcomponents.default.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 = _styledcomponents.default.span`
+  ${item}
+  background: var(--accent400);
+  border-radius: 2px;
+`;
+const ItemLink = _styledcomponents.default.a`
+  ${item}
+
+  ${(props)=>props.prev ? "color: var(--grey100);" : ""}
+`;
+const DotsSeparator = _styledcomponents.default.span`
+  color: var(--grey100);
+`;
+const arrow = `display: flex; font-size: 20px;`;
+const ItemPrev = _styledcomponents.default.a`
+  ${arrow}
+`;
+const ItemNext = _styledcomponents.default.a`
+  ${arrow}
+`;
+const KoinePaginationNav = ({ total, perPage, currentPage: _currentPage, baseUrl, showOffset = 2, currentUrl = "/", Link = "a" })=>{
+    let currentPage = (0, _ensureInt.default)(_currentPage);
+    total = (0, _ensureInt.default)(total);
+    perPage = (0, _ensureInt.default)(perPage);
     // page 0 means 1
     currentPage = currentPage || 1;
     baseUrl = baseUrl || currentUrl;
@@ -34,15 +59,15 @@ 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);
         }
@@ -50,16 +75,52 @@ 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 ((0, jsx_runtime_1.jsxs)(Root, { children: [prevArrow && ((0, jsx_runtime_1.jsx)(ItemPrev, { as: Link, href: "".concat(baseUrl, "/").concat(prevPage), children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowLeftR, {}) })), firstPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, { 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, { 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, { as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true, children: lastPage })), nextArrow && ((0, jsx_runtime_1.jsx)(ItemNext, { as: Link, href: "".concat(baseUrl, "/").concat(nextPage), children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowRightR, {}) }))] }));
+    const prevDots = pages[0] > firstPage + 1;
+    const nextDots = pages[pages.length - 1] < lastPage - 1;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Root, {
+        children: [
+            prevArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemPrev, {
+                as: Link,
+                href: `${baseUrl}/${prevPage}`,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_cg.CgArrowLeftR, {})
+            }),
+            firstPage !== currentPage && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemLink, {
+                as: Link,
+                href: `${baseUrl}`,
+                prev: true,
+                children: firstPage
+            }),
+            prevDots && /*#__PURE__*/ (0, _jsxruntime.jsx)(DotsSeparator, {
+                children: "..."
+            }),
+            pages.map((page)=>page === currentPage ? /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemCurrent, {
+                    children: page
+                }, page) : /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemLink, {
+                    as: Link,
+                    href: `${baseUrl}/${page}`,
+                    prev: page < currentPage,
+                    next: page > currentPage,
+                    children: page
+                }, `pagination-${page}`)),
+            nextDots && /*#__PURE__*/ (0, _jsxruntime.jsx)(DotsSeparator, {
+                children: "..."
+            }),
+            lastPage !== currentPage && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemLink, {
+                as: Link,
+                href: `${baseUrl}/${lastPage}`,
+                next: true,
+                children: lastPage
+            }),
+            nextArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemNext, {
+                as: Link,
+                href: `${baseUrl}/${nextPage}`,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_cg.CgArrowRightR, {})
+            })
+        ]
+    });
 };
-exports.KoinePaginationNav = KoinePaginationNav;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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.js

@@ -1,15 +1,45 @@
 "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 ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, initial: true, children: (0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.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 }) }) }));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PaginationResults", {
+    enumerable: true,
+    get: function() {
+        return PaginationResults;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
+const _framermotion = require("framer-motion");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const Root = _styledcomponents.default.div`
+  // overflow: hidden;
+`;
+const Inner = (0, _styledcomponents.default)(_framermotion.m.div)``;
+const PaginationResults = ({ children })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.AnimatePresence, {
+        exitBeforeEnter: true,
+        initial: true,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
+            children: /*#__PURE__*/ (0, _jsxruntime.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
+            })
+        })
+    });
 };
-exports.PaginationResults = PaginationResults;
-var templateObject_1, templateObject_2;

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/Pagination/index.js

@@ -1,5 +1,7 @@
 "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);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./PaginationNav"), exports);
+_export_star._(require("./PaginationResults"), exports);

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.js

@@ -1,10 +1,62 @@
 "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;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Pill: function() {
+        return Pill;
+    },
+    PillGreyLight: function() {
+        return PillGreyLight;
+    },
+    PillAccentLight: function() {
+        return PillAccentLight;
+    },
+    PillAccentLightOutlined: function() {
+        return PillAccentLightOutlined;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const Pill = _styledcomponents.default.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;
+`;
+const PillGreyLight = (0, _styledcomponents.default)(Pill)`
+  background: var(--grey800);
+  color: var(--grey100);
+
+  &:hover {
+    color: white;
+    background: var(--grey300);
+  }
+`;
+const PillAccentLight = (0, _styledcomponents.default)(Pill)`
+  background: var(--accent400);
+  color: var(--grey100);
+
+  &:hover {
+    color: #fff;
+    background: var(--accent300);
+  }
+`;
+const PillAccentLightOutlined = (0, _styledcomponents.default)(Pill)`
+  border: 1px solid var(--accent300);
+  color: var(--accent200);
+
+  &:hover {
+    color: #fff;
+    background: var(--accent300);
+  }
+`;

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/Pill/index.js

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