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

package/Bg/BgPhoto.js

@@ -1,20 +1,82 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BgPhoto = 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 Grid_1 = require("../Grid");
-var Hidden_1 = require("../Hidden");
-var BgPhotoWrap = (0, styled_components_1.default)(Hidden_1.Hidden)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  z-index: -10;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-position: top left;\n  background-size: contain;\n  filter: hue-rotate(-36deg);\n  opacity: 0.8;\n"], ["\n  z-index: -10;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-position: top left;\n  background-size: contain;\n  filter: hue-rotate(-36deg);\n  opacity: 0.8;\n"])));
-var BgPhotoMask = (0, styled_components_1.default)(Grid_1.Container)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  min-height: 100%;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    right: calc(100% - ", "px);\n    width: ", ";\n    background: linear-gradient(\n        90deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 100%\n      ),\n      linear-gradient(\n        60deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 70%\n      );\n  }\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: ", "px;\n    width: 100vw;\n    background: var(--bodyBg);\n  }\n"], ["\n  position: relative;\n  min-height: 100%;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    right: calc(100% - ", "px);\n    width: ", ";\n    background: linear-gradient(\n        90deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 100%\n      ),\n      linear-gradient(\n        60deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 70%\n      );\n  }\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: ", "px;\n    width: 100vw;\n    background: var(--bodyBg);\n  }\n"])), function (p) { return p.$overlap + 2; }, function (p) {
-    var containerSizePx = p.theme.breakpoints[p.containerSize];
-    return "calc(((100vw - ".concat(containerSizePx, "px) / 2) + ").concat(p.$overlap + 2, "px)");
-}, function (p) { return p.$overlap + 1; });
-var BgPhoto = function (_a) {
-    var src = _a.src, _b = _a.containerSize, containerSize = _b === void 0 ? "xl" : _b, _c = _a.$overlap, $overlap = _c === void 0 ? 0 : _c;
-    var styledProps = { containerSize: containerSize, $overlap: $overlap };
-    return ((0, jsx_runtime_1.jsx)(BgPhotoWrap, { style: { backgroundImage: "url(".concat(src, ")") }, "$max": "xxl", children: (0, jsx_runtime_1.jsx)(BgPhotoMask, tslib_1.__assign({ size: containerSize }, styledProps)) }));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "BgPhoto", {
+    enumerable: true,
+    get: function() {
+        return BgPhoto;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _Grid = require("../Grid");
+const _Hidden = require("../Hidden");
+const BgPhotoWrap = (0, _styledcomponents.default)(_Hidden.Hidden)`
+  z-index: -10;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-position: top left;
+  background-size: contain;
+  filter: hue-rotate(-36deg);
+  opacity: 0.8;
+`;
+const BgPhotoMask = (0, _styledcomponents.default)(_Grid.Container)`
+  position: relative;
+  min-height: 100%;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    right: calc(100% - ${(p)=>p.$overlap + 2}px);
+    width: ${(p)=>{
+    const containerSizePx = p.theme.breakpoints[p.containerSize];
+    return `calc(((100vw - ${containerSizePx}px) / 2) + ${p.$overlap + 2}px)`;
+}};
+    background: linear-gradient(
+        90deg,
+        rgba(var(--bodyBg-rgb, 0)) 0%,
+        rgba(var(--bodyBg-rgb, 1)) 100%
+      ),
+      linear-gradient(
+        60deg,
+        rgba(var(--bodyBg-rgb, 0)) 0%,
+        rgba(var(--bodyBg-rgb, 1)) 70%
+      );
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: ${(p)=>p.$overlap + 1}px;
+    width: 100vw;
+    background: var(--bodyBg);
+  }
+`;
+const BgPhoto = ({ src, containerSize = "xl", $overlap = 0 })=>{
+    const styledProps = {
+        containerSize,
+        $overlap
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(BgPhotoWrap, {
+        style: {
+            backgroundImage: `url(${src})`
+        },
+        $max: "xxl",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(BgPhotoMask, {
+            size: containerSize,
+            ...styledProps
+        })
+    });
 };
-exports.BgPhoto = BgPhoto;
-var templateObject_1, templateObject_2;

package/Bg/BgPhoto.mjs

@@ -1,16 +1,71 @@
-import { __assign, __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Container } from "../Grid";
 import { Hidden } from "../Hidden";
-var BgPhotoWrap = styled(Hidden)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: -10;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-position: top left;\n  background-size: contain;\n  filter: hue-rotate(-36deg);\n  opacity: 0.8;\n"], ["\n  z-index: -10;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-position: top left;\n  background-size: contain;\n  filter: hue-rotate(-36deg);\n  opacity: 0.8;\n"])));
-var BgPhotoMask = styled(Container)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  min-height: 100%;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    right: calc(100% - ", "px);\n    width: ", ";\n    background: linear-gradient(\n        90deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 100%\n      ),\n      linear-gradient(\n        60deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 70%\n      );\n  }\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: ", "px;\n    width: 100vw;\n    background: var(--bodyBg);\n  }\n"], ["\n  position: relative;\n  min-height: 100%;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    right: calc(100% - ", "px);\n    width: ", ";\n    background: linear-gradient(\n        90deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 100%\n      ),\n      linear-gradient(\n        60deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 70%\n      );\n  }\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: ", "px;\n    width: 100vw;\n    background: var(--bodyBg);\n  }\n"])), function (p) { return p.$overlap + 2; }, function (p) {
-    var containerSizePx = p.theme.breakpoints[p.containerSize];
-    return "calc(((100vw - ".concat(containerSizePx, "px) / 2) + ").concat(p.$overlap + 2, "px)");
-}, function (p) { return p.$overlap + 1; });
-export var BgPhoto = function (_a) {
-    var src = _a.src, _b = _a.containerSize, containerSize = _b === void 0 ? "xl" : _b, _c = _a.$overlap, $overlap = _c === void 0 ? 0 : _c;
-    var styledProps = { containerSize: containerSize, $overlap: $overlap };
-    return (_jsx(BgPhotoWrap, { style: { backgroundImage: "url(".concat(src, ")") }, "$max": "xxl", children: _jsx(BgPhotoMask, __assign({ size: containerSize }, styledProps)) }));
+const BgPhotoWrap = styled(Hidden)`
+  z-index: -10;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-position: top left;
+  background-size: contain;
+  filter: hue-rotate(-36deg);
+  opacity: 0.8;
+`;
+const BgPhotoMask = styled(Container)`
+  position: relative;
+  min-height: 100%;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    right: calc(100% - ${(p)=>p.$overlap + 2}px);
+    width: ${(p)=>{
+    const containerSizePx = p.theme.breakpoints[p.containerSize];
+    return `calc(((100vw - ${containerSizePx}px) / 2) + ${p.$overlap + 2}px)`;
+}};
+    background: linear-gradient(
+        90deg,
+        rgba(var(--bodyBg-rgb, 0)) 0%,
+        rgba(var(--bodyBg-rgb, 1)) 100%
+      ),
+      linear-gradient(
+        60deg,
+        rgba(var(--bodyBg-rgb, 0)) 0%,
+        rgba(var(--bodyBg-rgb, 1)) 70%
+      );
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: ${(p)=>p.$overlap + 1}px;
+    width: 100vw;
+    background: var(--bodyBg);
+  }
+`;
+export const BgPhoto = ({ src, containerSize = "xl", $overlap = 0 })=>{
+    const styledProps = {
+        containerSize,
+        $overlap
+    };
+    return /*#__PURE__*/ _jsx(BgPhotoWrap, {
+        style: {
+            backgroundImage: `url(${src})`
+        },
+        $max: "xxl",
+        children: /*#__PURE__*/ _jsx(BgPhotoMask, {
+            size: containerSize,
+            ...styledProps
+        })
+    });
 };
-var templateObject_1, templateObject_2;

package/Bg/BgSvg.js

@@ -1,16 +1,31 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BgSvg = 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 Root = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: fixed;\n  z-index: -2;\n  bottom: 0;\n  transform: rotate(180deg);\n  opacity: 0.9;\n"], ["\n  position: fixed;\n  z-index: -2;\n  bottom: 0;\n  transform: rotate(180deg);\n  opacity: 0.9;\n"])));
-/**
- * Centered triangle shape
- */
-var BgSvg = function (_a) {
-    var color = _a.color;
-    return ((0, jsx_runtime_1.jsx)(Root, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1200 120", preserveAspectRatio: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M1200 0L0 0 598.97 114.72 1200 0z", fill: color }) }));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "BgSvg", {
+    enumerable: true,
+    get: function() {
+        return BgSvg;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const Root = _styledcomponents.default.svg`
+  position: fixed;
+  z-index: -2;
+  bottom: 0;
+  transform: rotate(180deg);
+  opacity: 0.9;
+`;
+const BgSvg = ({ color })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1200 120",
+        preserveAspectRatio: "none",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+            d: "M1200 0L0 0 598.97 114.72 1200 0z",
+            fill: color
+        })
+    });
 };
-exports.BgSvg = BgSvg;
-var templateObject_1;

package/Bg/BgSvg.mjs

@@ -1,12 +1,22 @@
-import { __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-var Root = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: -2;\n  bottom: 0;\n  transform: rotate(180deg);\n  opacity: 0.9;\n"], ["\n  position: fixed;\n  z-index: -2;\n  bottom: 0;\n  transform: rotate(180deg);\n  opacity: 0.9;\n"])));
+const Root = styled.svg`
+  position: fixed;
+  z-index: -2;
+  bottom: 0;
+  transform: rotate(180deg);
+  opacity: 0.9;
+`;
 /**
  * Centered triangle shape
- */
-export var BgSvg = function (_a) {
-    var color = _a.color;
-    return (_jsx(Root, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1200 120", preserveAspectRatio: "none", children: _jsx("path", { d: "M1200 0L0 0 598.97 114.72 1200 0z", fill: color }) }));
+ */ export const BgSvg = ({ color })=>{
+    return /*#__PURE__*/ _jsx(Root, {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1200 120",
+        preserveAspectRatio: "none",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M1200 0L0 0 598.97 114.72 1200 0z",
+            fill: color
+        })
+    });
 };
-var templateObject_1;

package/Bg/index.js

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

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import { KoineComponentProps, KoineComponent } from "../types";
+import { KoineComponent, KoineComponentProps } from "../types";
 export type BreadcrumbsItem = {
     title: string;
     url?: string;

package/Breadcrumbs/Breadcrumbs.js

@@ -1,31 +1,103 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineBreadcrumbs = 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 framer_motion_1 = require("framer-motion");
-var md_1 = require("react-icons/md");
-var titleCase_1 = tslib_1.__importDefault(require("@koine/utils/titleCase"));
-var media_1 = require("../styles/media");
-var LINK_GUTTER_X = 10;
-var Root = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  position: relative;\n"], ["\n  display: flex;\n  position: relative;\n"])));
-var Inner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  font-size: 11px;\n  color: var(--grey100);\n  ", " {\n    font-size: 12px;\n  }\n  ", " {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"], ["\n  display: flex;\n  font-size: 11px;\n  color: var(--grey100);\n  ", " {\n    font-size: 12px;\n  }\n  ", " {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"])), media_1.min.sm, media_1.max.lg);
-var Item = (0, styled_components_1.default)(framer_motion_1.m.div)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* margin: 0 10px 0 0; */\n\n  &:first-child {\n    margin-left: -", "px;\n  }\n  ", " {\n    &:first-child {\n      margin-left: -", "px;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  /* margin: 0 10px 0 0; */\n\n  &:first-child {\n    margin-left: -", "px;\n  }\n  ", " {\n    &:first-child {\n      margin-left: -", "px;\n    }\n  }\n"])), LINK_GUTTER_X / 2, media_1.min.sm, LINK_GUTTER_X);
-var itemChild = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  display: block;\n  padding: 10px ", "px;\n\n  ", " {\n    padding: 10px ", "px;\n  }\n"], ["\n  display: block;\n  padding: 10px ", "px;\n\n  ", " {\n    padding: 10px ", "px;\n  }\n"])), LINK_GUTTER_X / 2, media_1.min.sm, LINK_GUTTER_X);
-var ItemLink = styled_components_1.default.a(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  ", "\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n"])), itemChild);
-var ItemCurrent = styled_components_1.default.span(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), itemChild);
-var ItemSeparator = (0, styled_components_1.default)(md_1.MdKeyboardArrowRight)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject([""], [""])));
-var KoineBreadcrumbs = function (_a) {
-    var _b = _a.items, items = _b === void 0 ? [] : _b, Link = _a.Link, props = tslib_1.__rest(_a, ["items", "Link"]);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "KoineBreadcrumbs", {
+    enumerable: true,
+    get: function() {
+        return KoineBreadcrumbs;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("react/jsx-runtime");
+const _framermotion = require("framer-motion");
+const _md = require("react-icons/md");
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
+const _titleCase = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/titleCase"));
+const _media = require("../styles/media");
+const LINK_GUTTER_X = 10;
+const Root = _styledcomponents.default.nav`
+  display: flex;
+  position: relative;
+`;
+const Inner = _styledcomponents.default.div`
+  display: flex;
+  font-size: 11px;
+  color: var(--grey100);
+  ${_media.min.sm} {
+    font-size: 12px;
+  }
+  ${_media.max.lg} {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+`;
+const Item = (0, _styledcomponents.default)(_framermotion.m.div)`
+  display: flex;
+  align-items: center;
+  /* margin: 0 10px 0 0; */
+
+  &:first-child {
+    margin-left: -${LINK_GUTTER_X / 2}px;
+  }
+  ${_media.min.sm} {
+    &:first-child {
+      margin-left: -${LINK_GUTTER_X}px;
+    }
+  }
+`;
+const itemChild = (0, _styledcomponents.css)`
+  display: block;
+  padding: 10px ${LINK_GUTTER_X / 2}px;
+
+  ${_media.min.sm} {
+    padding: 10px ${LINK_GUTTER_X}px;
+  }
+`;
+const ItemLink = _styledcomponents.default.a`
+  ${itemChild}
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const ItemCurrent = _styledcomponents.default.span`
+  ${itemChild}
+`;
+const ItemSeparator = (0, _styledcomponents.default)(_md.MdKeyboardArrowRight)``;
+const KoineBreadcrumbs = ({ items = [], Link, ...props })=>{
     if (!items.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({}, props, { children: (0, jsx_runtime_1.jsx)(Inner, { children: items.map(function (item, idx) { return ((0, jsx_runtime_1.jsxs)(Item, { initial: { opacity: 0, x: 20 }, animate: {
-                    opacity: 1,
-                    x: 0,
-                    transition: { delay: idx * 0.2 },
-                }, children: [item.url && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: item.url, children: (0, titleCase_1.default)(item.title) })), !item.url && (0, jsx_runtime_1.jsx)(ItemCurrent, { children: (0, titleCase_1.default)(item.title) }), idx < items.length - 1 && (0, jsx_runtime_1.jsx)(ItemSeparator, {})] }, idx)); }) }) })));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Inner, {
+            children: items.map((item, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(Item, {
+                    initial: {
+                        opacity: 0,
+                        x: 20
+                    },
+                    animate: {
+                        opacity: 1,
+                        x: 0,
+                        transition: {
+                            delay: idx * 0.2
+                        }
+                    },
+                    children: [
+                        item.url && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemLink, {
+                            as: Link,
+                            href: item.url,
+                            children: (0, _titleCase.default)(item.title)
+                        }),
+                        !item.url && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemCurrent, {
+                            children: (0, _titleCase.default)(item.title)
+                        }),
+                        idx < items.length - 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemSeparator, {})
+                    ]
+                }, idx))
+        })
+    });
 };
-exports.KoineBreadcrumbs = KoineBreadcrumbs;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Breadcrumbs/Breadcrumbs.mjs

@@ -1,27 +1,91 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from "styled-components";
 import { m } from "framer-motion";
 import { MdKeyboardArrowRight as IconDelimiter } from "react-icons/md";
+import styled, { css } from "styled-components";
 import titleCase from "@koine/utils/titleCase";
 import { max, min } from "../styles/media";
-var LINK_GUTTER_X = 10;
-var Root = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n"], ["\n  display: flex;\n  position: relative;\n"])));
-var Inner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  font-size: 11px;\n  color: var(--grey100);\n  ", " {\n    font-size: 12px;\n  }\n  ", " {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"], ["\n  display: flex;\n  font-size: 11px;\n  color: var(--grey100);\n  ", " {\n    font-size: 12px;\n  }\n  ", " {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"])), min.sm, max.lg);
-var Item = styled(m.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* margin: 0 10px 0 0; */\n\n  &:first-child {\n    margin-left: -", "px;\n  }\n  ", " {\n    &:first-child {\n      margin-left: -", "px;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  /* margin: 0 10px 0 0; */\n\n  &:first-child {\n    margin-left: -", "px;\n  }\n  ", " {\n    &:first-child {\n      margin-left: -", "px;\n    }\n  }\n"])), LINK_GUTTER_X / 2, min.sm, LINK_GUTTER_X);
-var itemChild = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  padding: 10px ", "px;\n\n  ", " {\n    padding: 10px ", "px;\n  }\n"], ["\n  display: block;\n  padding: 10px ", "px;\n\n  ", " {\n    padding: 10px ", "px;\n  }\n"])), LINK_GUTTER_X / 2, min.sm, LINK_GUTTER_X);
-var ItemLink = styled.a(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  ", "\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n"])), itemChild);
-var ItemCurrent = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), itemChild);
-var ItemSeparator = styled(IconDelimiter)(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
-export var KoineBreadcrumbs = function (_a) {
-    var _b = _a.items, items = _b === void 0 ? [] : _b, Link = _a.Link, props = __rest(_a, ["items", "Link"]);
+const LINK_GUTTER_X = 10;
+const Root = styled.nav`
+  display: flex;
+  position: relative;
+`;
+const Inner = styled.div`
+  display: flex;
+  font-size: 11px;
+  color: var(--grey100);
+  ${min.sm} {
+    font-size: 12px;
+  }
+  ${max.lg} {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+`;
+const Item = styled(m.div)`
+  display: flex;
+  align-items: center;
+  /* margin: 0 10px 0 0; */
+
+  &:first-child {
+    margin-left: -${LINK_GUTTER_X / 2}px;
+  }
+  ${min.sm} {
+    &:first-child {
+      margin-left: -${LINK_GUTTER_X}px;
+    }
+  }
+`;
+const itemChild = css`
+  display: block;
+  padding: 10px ${LINK_GUTTER_X / 2}px;
+
+  ${min.sm} {
+    padding: 10px ${LINK_GUTTER_X}px;
+  }
+`;
+const ItemLink = styled.a`
+  ${itemChild}
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const ItemCurrent = styled.span`
+  ${itemChild}
+`;
+const ItemSeparator = styled(IconDelimiter)``;
+export const KoineBreadcrumbs = ({ items = [], Link, ...props })=>{
     if (!items.length) {
         return null;
     }
-    return (_jsx(Root, __assign({}, props, { children: _jsx(Inner, { children: items.map(function (item, idx) { return (_jsxs(Item, { initial: { opacity: 0, x: 20 }, animate: {
-                    opacity: 1,
-                    x: 0,
-                    transition: { delay: idx * 0.2 },
-                }, children: [item.url && (_jsx(ItemLink, { as: Link, href: item.url, children: titleCase(item.title) })), !item.url && _jsx(ItemCurrent, { children: titleCase(item.title) }), idx < items.length - 1 && _jsx(ItemSeparator, {})] }, idx)); }) }) })));
+    return /*#__PURE__*/ _jsx(Root, {
+        ...props,
+        children: /*#__PURE__*/ _jsx(Inner, {
+            children: items.map((item, idx)=>/*#__PURE__*/ _jsxs(Item, {
+                    initial: {
+                        opacity: 0,
+                        x: 20
+                    },
+                    animate: {
+                        opacity: 1,
+                        x: 0,
+                        transition: {
+                            delay: idx * 0.2
+                        }
+                    },
+                    children: [
+                        item.url && /*#__PURE__*/ _jsx(ItemLink, {
+                            as: Link,
+                            href: item.url,
+                            children: titleCase(item.title)
+                        }),
+                        !item.url && /*#__PURE__*/ _jsx(ItemCurrent, {
+                            children: titleCase(item.title)
+                        }),
+                        idx < items.length - 1 && /*#__PURE__*/ _jsx(ItemSeparator, {})
+                    ]
+                }, idx))
+        })
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Breadcrumbs/index.js

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

package/Buttons/Button.d.ts

@@ -8,7 +8,7 @@ export declare const btnStyleReset: import("styled-components").FlattenSimpleInt
 export declare const btnStyleBase: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<KoineButtonUiProps, import("styled-components").DefaultTheme>>;
 export declare const btnStyleContained: import("styled-components").FlattenSimpleInterpolation;
 export declare const btnStyleOutlined: import("styled-components").FlattenSimpleInterpolation;
-export declare const KoineButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, KoineButtonUiProps, never>;
+export declare const KoineButton: any;
 export type KoineButtonUiProps = {
     disabled?: boolean;
     $variant?: "contained" | "outlined";